为了账号安全,请及时绑定邮箱和手机立即绑定

为什么这两个input会分行显示,来自“手把手教你电商网站开发”1-4

search_box这个div下只有两个input直接子元素,一个是文本输入框,class="search_text",另一个是按钮,class="search_btn";而且这


两个input都设置了border: none;

现在我将search_box的宽度设为430px;search_text的宽度设为360px;search_btn的宽度设为70px,结果是这两个input分行显示了,

关键部分代码如下

```css

body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input{margin: 0; padding: 0;}

input, select, textarea{outline: none; border: none;}

.search_box{width: 430px;}

.search_text{width: 360px; height: 35px;}

.search_btn{width: 70px; height: 35px; font-size: 14px; font-family: "微软雅黑"; background-color: #ff8c00; color: #fff;}

.fl{float: left;}

.fr{float: right;}

```


```    html

<div class="logoBar">

<div class="comWidth">

<div class="logo fl">

<a href="#"><img src="./images/logo.jpg" alt="慕课网" /></a>

</div>

<div class="search_box fl">

<input type="text" class="search_text" />

<input type="button" value="搜 索" class="search_btn" />

</div>

<div class="shopCar fr">

<span class="shopText">购物车</span>

<span class="shopNum">0</span>

</div>

</div>

</div>

```    



正在回答

4 回答

利用浮动float:left;去掉输入框之间的间距

0 回复 有任何疑惑可以回复我~
#1

flyingjoer 提问者

但是没有间距啊,我的代码上写了,margin和padding都设为0了,连border也设了none,为什么要浮动?
2015-12-16 回复 有任何疑惑可以回复我~
#2

愁晴 回复 flyingjoer 提问者

margin和padding都设为0对input没有效果,还是有存在边距,去除边距一种方法是用浮动,另一种方法利用margin-right的负值,但是不同浏览器兼容性不同,统一数值还是会出现不同效果。所以,可以利用各个浏览器的hack写法设置margin-right
2015-12-17 回复 有任何疑惑可以回复我~
#3

愁晴 回复 flyingjoer 提问者

如果想要看看是否有间距可以先把父元素的宽度设置长一点,再把设置边框颜色,会发现存在间距的
2015-12-17 回复 有任何疑惑可以回复我~
#4

flyingjoer 提问者

多谢指教,又知道了一点东西。
2015-12-17 回复 有任何疑惑可以回复我~
#5

flyingjoer 提问者 回复 愁晴

那是不是就是说如果我将它们的父盒子.search_box的宽度变为440px的话,它们就会在一行了
2015-12-17 回复 有任何疑惑可以回复我~
#6

愁晴 回复 flyingjoer 提问者

是可以在一行,你可以实践一下
2015-12-17 回复 有任何疑惑可以回复我~
查看3条回复

宽度不够 然后挤压下行 要不就是你给了他块级元素块

0 回复 有任何疑惑可以回复我~
#1

flyingjoer 提问者

宽度够了,430=360+70;而且input设置了border: none,而且也没有padding和margin,也没有使用display,我的关键代码上都写了
2015-12-16 回复 有任何疑惑可以回复我~

宽度够了,430=360+70;而且input设置了border: none

0 回复 有任何疑惑可以回复我~

因为你 search_box 的宽度不够  或者是那个输入框宽度太大,所以一行显示不下。就成2行了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
手把手教你实现电商网站开发
  • 参与学习       166499    人
  • 解答问题       182    个

本课程主要介绍电商网站基本制作流程,掌握整站开发过程,增加经验

进入课程

为什么这两个input会分行显示,来自“手把手教你电商网站开发”1-4

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信