為什么這兩個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>
```????
2015-12-16
利用浮動float:left;去掉輸入框之間的間距
2015-12-16
寬度不夠 然后擠壓下行 要不就是你給了他塊級元素塊
2015-12-16
寬度夠了，430=360+70；而且input設置了border: none
2015-12-16
因為你?search_box 的寬度不夠 ?或者是那個輸入框寬度太大，所以一行顯示不下。就成2行了