为什么这两个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>
```