今天在練習的時候遇到了一點小問題，稍作記錄希望下次遇到可以有點印象。
簡單說明一下就是要編寫一個搜索框，搜索框分爲兩塊，一塊是左邊的文本框s_text，一塊是右邊的搜索按鈕s_button，具體的HTML代碼如下：
<div class="searchbox">
<input class="s_text" type="text" value="hotwords"><a href="#"><input class="s_button" type="button" value="搜索"></a>
//此處文本框和按鈕兩個input沒有換行；
</div>
再配以適當的CSS代碼：
* {
margin: 0;
padding: 0;
}
input{
border: 0;
outline: none;
background: none;
}
.searchbox{
width: 546px;
height: 32px;
border: 2px solid #e2231a;
margin: 0 auto;
}
.searchbox input.s_text{
width: 468px;
height: 32px;
padding-left: 20px;
background-color: #ffffff;
}
.searchbox a input.s_button{
width: 58px;
height: 32px;
cursor: pointer;
background-color: #e2231a;
}
效果圖如下：
此時問題就已經出現了：input文本框往下偏移了一點點。
然而在修改按鈕文字爲圖片背景時，即修改代碼爲：
<div class="searchbox">
<input class="s_text" type="text" value="hotwords"><a href="#"><input class="s_button" type="button"></a>
//此處第二個input去掉了value值；
</div>
效果圖如下：
問題似乎更大了：input文本框與input按鈕"看起來"完全不在一條水平線上。
出現這兩個問題的原因就在於input標籤的display屬性是inline-block，內聯塊級元素，和img等其他內聯元素一樣，他們在塊級元素中默認是水平排列，就會有一個默認的vertical-align屬性，vertical-align默認值是baseline，也就是基線對齊。
沒有value值的按鈕基線是下邊框，而有value值的文本框的基線是文字底部。
所以我們仔細看，其實右邊的input按鈕的下邊框與左邊的input文本框中的文字是底部是對齊的：
那麼如何解決這兩個問題呢，有兩個很簡單的方法：
- 將input按鈕的vertical-align屬性值設置爲middle或top；
.searchbox a input.s_button{
width: 58px;
height: 32px;
cursor: pointer;
vertical-align: middle; //修改對齊方式
background-color: #e2231a;
background: url(img/search.png) no-repeat 50% #e1251b;
}
- 將input標籤修改爲塊級元素display: block，此時如果需要文本框與搜索按鈕處於同一行，則需要設置浮動，而float本身就會使該標籤變爲塊級元素，所以我們只需要將input標籤設置float: left即可。
input{
border: 0;
outline: none;
background: none;
float: left; //不要忘記上級元素的overflow，否則會造成高度塌陷。
}
修改後的最終效果圖如下：
參考鏈接：
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/