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

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《为什么inline-block元素设置overflow:hidden后会错位显示？ 》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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

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

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

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

好了，本文到此结束，带大家了解了《为什么inline-block元素设置overflow:hidden后会错位显示？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！