display_inline-block 出现的元素错位问题及解决方案
背景
布局想让两个div在一行显示,用了display:inline-block
但是出现了如图的错位情况,左边放了ul 右边就突然往下拉跨了一段
解决办法
在display:inline-block
后面添加 vertical-align: top;
让他们 基于同一个baseline 值对齐。
代码
.box {
height: 100%;
display: inline-block;
/* float: left; */
vertical-align: top;
}
<div class="test">
<div style="background-color: red;">haaaaaaaaaaaaaaaaaa</div>
<div class="box box1">
<ul>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
<li>李明</li>
</ul>
</div>
<div class="box box2">
<p>jhadhkdsfkjlhskf</p>
<div>
<span> jkdlsfhdklghkdjg ,我是div</span>
</div>
<table>
<tr>
<th>我是表头</th>
<th>我是表头</th>
<th>我是表头</th>
<th>我是表头</th>
<th>我是表头</th>
</tr>
<tr>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
</tr>
<tr>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
</tr>
<tr>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
<td>啦啦啦</td>
</tr>
</table>
</div>
<div style="background-color: red; clear:both">
hahahahahahah
</div>
</div>
让两个div在哪同一行的其他方法
float ,但是要注意用完后清除浮动,定位也可以做,可以去看看盒子模型,弄明白就好布局了