如何將input和button放在同一行

0x00 如何去除input與button中的空白

    在寫搜索框時經常會遇到input與button一起用時會出現一個空白的情況

    這樣影響佈局，而刪去這個的方法有兩種，一種是將兩個標籤寫在同一行；

    第二種是在兩個標籤中寫上註釋

  <div>
    <input type="text" value="奧利奧餅乾"/><!--
    --><button>
      <i class="iconfont"></i>
    </button>
  </div>

0x01 如何使input與button標籤對齊

    這個算是web裏的經典問題了，這兩個標籤無法對齊的原因是因爲這兩個標籤的基線不一樣，所以解決方法就是設置兩個的基線一致就行了；

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;