浮动元素对齐错位的解决方法
在使用 inline-block 元素时，有时会遇到元素错位显示的情况。例如，以下代码：
<div>
<span>11</span>
<span class="desc">22</span>
<span>33</span>
<span>44</span>
</div>
span{
display:inline-block;
}
.desc{
overflow:hidden;
}不设置 overflow 属性时，元素会正常显示：
11223344
但设置了 overflow 属性后，元素会出现错位：
11 22 3344
这是因为 overflow:hidden 影响了 inline-block 元素的基线位置。当后续的 inline-block 元素与前一个元素的基线对齐时，就会出现错位。
为了解决这个问题，可以将 vertical-align 属性设置为 middle，这样可以将元素垂直居中对齐：
.list {
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
vertical-align: middle;
}
.add {
display: inline-block;
width: 76px;
height: 76px;
...
// overflow: hidden; 可以注释掉
vertical-align: middle;
}以上就是使用 inline-block 元素时，为何会出现元素错位显示？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
823
收藏
