为什么使用 inline-block 元素时会错位？

发布日期： 2024-11-08 阅读量： 作者： 网络

inline-block 元素错位成因剖析

在使用 inline-block 元素时，可能会遇到它们错位显示的问题。如代码 demo 所示，当设置了 overflow 属性时，a 标签就会错位下沉，而未设置时却不会。

问题根源：

overflow:hidden 属性影响了 inline-block 元素的 baseline 位置。由于 list 也是行内块元素，并设置了 overflow，导致其基线位置改变，进而使得下一个元素与其基线对齐，从而产生错位。

解决方案：

修改 vertical 属性可以解决此问题。通过添加 vertical-align:middle 属性，可以控制元素在 inline-block 元素中的垂直对齐方式，避免其向下偏移。

修改后代码：

.list {
    /* ... 其他属性 */
    vertical-align: middle;
}

随便看看