input & button对不齐、有间隙、高度不一致等问题解决方法
1.input和button对不齐的原因对不齐是因为行内元素的基线是不同的，所以会导致高低不同。解决办法：每一个元素都加上vertical-align:middle;即可
.text111{width:200px;height:30px;vertical-align:middle;}
.btn111{width:80px;height:30px;vertical-align:middle;}
<input type="text" class="text111"/>
<button class="btn111">提交</button></pre>
效果如下：
<input type="text" style="width:200px;height:30px;vertical-align:middle;"/> <button style="width:80px;height:30px;vertical-align:middle;">提交</button>\<pre><br>2.input和button高度不一致的原因button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部。button的高度包含边框的高度，而文本框text则不包含边框高度。这就导致input高度会比button高两像素。
<br> 解决方法①：给input加上box-sizing:border-box;
<br> 解决方法②：给button加上box-sizing:content-box;
.text111{width:200px;height:30px;vertical-align:middle;box-sizing:border-box;}
效果如下：
<input type="text" style="width:200px;height:30px;vertical-align:middle;box-sizing:border-box;"/> <button style="width:80px;height:30px;vertical-align:middle;">提交</button>
<br>
<br>
.btn111{width:80px;height:30px;vertical-align:middle;box-sizing:content-box;}
效果如下：
<input type="text" style="width:200px;height:30px;vertical-align:middle;"/> <button style="width:80px;height:30px;vertical-align:middle;box-sizing:content-box;">提交</button>
<br>3.input和button有间隙的原因水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙。
<br> 解决方法：两个标签不换行即可
<input type="text" class="text111"/><button class="btn111">提交</button>
效果如下：
<input type="text" style="width:200px;height:30px;vertical-align:middle;box-sizing:border-box;"/><button style="width:80px;height:30px;vertical-align:middle;">提交</button>
</pre>
页:
[1]