如何将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;