为什么inline-block元素设置overflow:hidden后会错位显示？

inline-block元素错位显示的根源

当两个inline-block元素相邻显示时，为何会出现错位的问题？

答案在于overflow:hidden属性对inline-block元素基线（baseline）的影响。基线决定了文本竖向对齐的位置。当第一个inline-block元素（如11）设置overflow:hidden时，其基线会发生改变，导致后续元素（如 class="desc">22）与之按照基线对齐，这就会造成错位。

为了解决此问题，可以设置vertical-align属性，让后续元素与第一个元素的中心对齐。例如，在给定的代码中，可以通过设置.add .list { vertical-align:middle; }来恢复元素的正常展示。

以上就是为什么inline-block元素设置overflow:hidden后会错位显示？的详细内容，更多请关注其它相关文章！