使用 inline-block 元素时，为何会出现元素错位显示？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《使用 inline-block 元素时，为何会出现元素错位显示？ 》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

浮动元素对齐错位的解决方法

在使用 inline-block 元素时，有时会遇到元素错位显示的情况。例如，以下代码：

<div>
    <span>11</span>
    <span class="desc">22</span>
    <span>33</span>
    <span>44</span>
</div>

span{
    display:inline-block;
}
.desc{
    overflow:hidden;
}

不设置 overflow 属性时，元素会正常显示：

11223344

但设置了 overflow 属性后，元素会出现错位：

11
22
3344

这是因为 overflow:hidden 影响了 inline-block 元素的基线位置。当后续的 inline-block 元素与前一个元素的基线对齐时，就会出现错位。

为了解决这个问题，可以将 vertical-align 属性设置为 middle，这样可以将元素垂直居中对齐：

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

.add {
    display: inline-block;
    width: 76px;
    height: 76px;
    ...
    // overflow: hidden; 可以注释掉
    vertical-align: middle;
}

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~