IE6、IE7、IE8及其他瀏覽器多個元素並排顯示

HTML代碼

<div class="line">
    <h1>全部input框</h1>
    <input placeholder="我是輸入框..." type="text"><input placeholder="我是輸入框..." type="text"><input type="text" placeholder="我是輸入框...">
</div>
<div class="line">
   <h1>input span div 組合並排</h1>
    <input type="
 
text" placeholder="我是輸入框"><span>我是span標簽</span><div>我是div</div>
</div>

CSS代碼

.line {margin: 10px 0;}
.line input,.line span,.line div{display: inline-block;vertical-align: middle;height: 30px;border: 1px solid #eee;width: auto;box-sizing: border-box;outline: none;font-size: 12px;}

原理：

把需要並排顯示的元素添加兩個屬性：內聯塊狀和水平居中

display: inline-block;vertical-align: middle;

註意：並排元素高度要一樣才能達到水平居中

還有一個問題是input和div設置一樣的高度，為什麽input高度會更大一些，原因是input自帶padding值，把自身撐大了，可以加box-sizing：border-box解決

IE6、IE7、IE8及其他瀏覽器多個元素並排顯示