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也是不会出现这种情况。

本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!网站资源来自用户分享,如有侵权行为请联系网站客服处理。
二月繁华 » display:inline block 元素不在同一水平线怎么解决

发表评论

分享最优质的资源集合

了解详情