inline-block元素错位：原因及overflow与vertical-align属性的妙用
前端布局中，inline-block元素的错位问题时有发生，尤其当涉及overflow属性时，问题更为复杂。本文将深入探讨其原因并提供有效的解决方案。
我们经常会遇到这样的情况：一个包含多个a标签的列表，部分a标签设置了overflow: hidden。观察发现，未设置overflow的a标签会“下沉”，而设置了overflow: hidden的标签则位置正常。
这与overflow: hidden对inline-block元素基线（baseline）位置的影响密切相关。inline-block元素默认垂直对齐方式是基于基线。当一个元素设置了overflow: hidden后，其基线位置会发生改变，导致后续元素与其基线对齐时出现错位。如果所有元素都设置了overflow: hidden，则基线位置一致，错位问题自然消除。
举例说明：
11 22 33 44
span {
display: inline-block;
}
.desc {
overflow: hidden;
}
上述代码中，带有desc类的span元素会造成后续元素下移。
解决方法：巧妙运用vertical-align属性。通过设置vertical-align: middle，可以将所有inline-block元素的垂直对齐方式统一，从而避免错位。
例如：
.list {
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
vertical-align: middle;
}
.add {
display: inline-block;
width: 76px;
height: 76px;
color: #ccc;
border: 2px dashed;
transition: color .25s;
position: relative;
vertical-align: middle;
}
通过设置vertical-align: middle，确保所有inline-block元素在同一水平线上，有效解决了错位问题。 这是一种简单而有效的解决inline-block元素错位问题的策略。
