浮动元素对齐错位的解决方法
在使用 inline-block 元素时,有时会遇到元素错位显示的情况。例如,以下代码:
不设置
overflow
属性时,元素会正常显示:
但设置了 overflow 属性后,元素会出现错位:
这是因为 overflow:hidden 影响了 inline-block 元素的基线位置。当后续的 inline-block 元素与前一个元素的基线对齐时,就会出现错位。
为了解决这个问题,可以将 vertical-align 属性设置为 middle,这样可以将元素
垂直居中
对齐:
11
22
33
44
span{
display:inline-block;
}
.desc{
overflow:hidden;
}1122334411
22
3344.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;
}