使用inline-block導致其他元素無法居中
阿新 • • 發佈:2019-02-20
今天遇到使用兩個display:inline-block的div無法對齊的問題,情況如下。查了下發現兩個並列的inline-block預設是基線對齊的,可通過設定vertical-align進行頂部對齊。
css程式碼:
html程式碼<style> *{ margin: 0px; padding: 0px; } div{ display: inline-block; height: 40px; } #test3{ font-size: 30px; background-color: blue; } ul{ height: 60px; background-color: black; display: inline-block; } li{ width: 100px; height: 50px; margin-right: 10px; font-size: 40px; float: left; list-style-type: none; background-color: orange; } </style>
<div id="test3">
vertical-align3
</div>
<ul>
<li>測試1</li>
</ul>
當vertical-align為baseline時,對齊情況如下:
綜上如果將vertical-align設定為top,即可解決問題