为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位？

哈喽！今天心血来潮给大家带来了《为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位？》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

overflow 导致 inline-block 元素错位解析

当多个 inline-block 元素并列排列时，可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。

问题现象

在不设置 overflow 属性时，元素按预期显示在同一水平线上：

<p>不设置 overflow：<br></p>
<div style="display: inline-block;">a</div>
<div style="display: inline-block;">b</div>

而设置 overflow 后，元素会错位显示，如下所示：

<p>设置 overflow 后：<br></p>
<div style="display: inline-block; overflow:hidden;">a</div>
<div style="display: inline-block;">b</div>

原因分析

overflow:hidden 属性会影响 inline-block 元素的基线对齐。因为 inline-block 元素本质上也是行内块，当overflow设置为隐藏时，元素行高的基线位置就会发生变化，导致其后的元素与当前元素基线对齐时错位。

解决方案

为了修复此问题，可以在 inline-block 元素上设置 vertical-align 属性，将基线对齐方式调整为中间。

例如：

.list {
    display: inline-block;
    width: 80px;
    height: 80px;
    overflow: hidden;
    vertical-align: middle;
}

理论要掌握，实操不能落！以上关于《为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！