display:inline block 元素不在同一水平线怎么解决

display:inline block 元素不在同一水平线怎么解决
今天在写一个页面的时候，布局出现了错位元素不在同一水平线，后发现是使用了display:inline block;的原因。

原样式代码：

1
2
3
4
5

.site-item{
display: inline-block;
margin:20px 1.5%;
width: 33.3%;
}

使用了上面代码就出现了元素不在同一水平线的情况，一开始让我百思不得其解。

经过查找相关资料，说是因为display:inline-block是一种介于inline和block的东西，而它也和inline属性一样，存在基准线的问题，尝试了添加 vertical-align: top;后解决了元素不在同一水平线高度不一的问题。

1
2
3
4
5
6

.site-item{
display: inline-block;
vertical-align: top;
margin:20px 1.5%;
width: 33.3%;
}

另外你也可以尝试float:lef，如果你用float布局，不用inline-block也是不会出现这种情况。

分享到：