使用 inline-block 元素时，为何会出现元素错位显示？

浮动元素对齐错位的解决方法

在使用 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;
}

登录后复制

不设置 属性时，元素会正常显示：

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 元素时，为何会出现元素错位显示？的详细内容，更多请关注米云其它相关文章！