跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

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

浮动元素对齐错位的解决方法 在使用 inline-block 元素时,有时会遇到元素错位显示的情况。例如,以下代码:
11 22 33 44
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; }

相关文章