input、button 同在一行 高度、缝隙问题整理

• 当给input 和button 设置一样的 height时，会不一样高
  

<input type="" name="" id="input" value="" placeholder=" 请输入城市"/>
<input type="button" name="" id="searchBtn" value="查询" />	

解决方法：*{box-sizing: border-box; } // 将盒子的大小设置成 都含border，内边距

2，有缝隙的问题：

解决方法： 

//方法1, 两个 input 写在一行

//方法2, 中间加 注释  

<input type="" name="" id="input" value="" placeholder=" 请输入城市"/><!-- 
 --><input type="button" name="" id="searchBtn" value="查询" />	

3，竖直方向对不齐问题

解决方法：将两个同事设置 顶部对齐：

vertical-align: top;