今天實驗室學弟問我 “怎麼這個輸入、搜尋按鈕怎麼都對不齊啊”

就像這樣子：

咦 怎麼會 我看看 程式碼沒毛病啊 同樣的height、同樣的line-height，各有一個width（複習一下，input屬於inline-block元素）

倒騰了好久 感覺甚是詭異 現在回想 怎麼沒有趕緊百度下 踩過這個坑的前輩們也是不少啊 

首先要說明的是這個現象只會出現在Chrome中 沒想到這次會是Chrome的鍋 在Firefox和IE下都比較正常

至於原因呢。。。有人這麼說，不過我已經把它們的border、padding都設為0了，還是對不齊，所以不敢苟同，希望知道的大大告知

而解決方案呢 ，這就比較多了

1.包裹+浮動：如span+float：left

主要程式碼：

.text{
    padding:0;
    border:0;
    width:400px;
    height: 30px;
}
.but{
    border:0;
    padding: 0;
    width: 30px;
    height: 30px;
    background: url(so.svg);
}
span{
    float: left;
}

    <form>
        <span><input class="text" type="text" name="inputext" placeholder="請輸入搜尋內容"></span>
        <span><input class="but" type="button" name="but"></span>
    </form>

    <form>
        <input class="text" type="text" name="inputext" placeholder="請輸入搜尋內容">
        <input class="but" type="button" name="but">
    </form>
 

有三種設定方法任君選擇：對button的加vertical-align:bottom/middle，或對text的加vertical-align:top

3.用空格value

這是我自己倒騰發現的，當button不設定width的時候，兩者是會對齊的，當然是要給button加了value才能反映出來，這確實是挺奇怪的，所以把value內容換成空格也是可以的，當然這只是個小發現，生產中必然不可如此。

最後順便說一下，button和text之間的空格

原因呢是他們是inline-block，必然帶有內聯元素的屬性 就是內容間的間隔

兩個常用的方法;1.在父元素設定font-size:0px;2.去掉程式碼中兩個input間的空格，有種顯示上比較優雅的方式，就是用註釋（這是從張鑫旭大神那看來的）