li设置display:inline-block；后显示出现问题，（踩过的坑）分享下如何解决！

最新推荐文章于 2023-11-21 17:24:08 发布

�MFL

最新推荐文章于 2023-11-21 17:24:08 发布

阅读量2.1k

点赞数

分类专栏： display的坑文章标签： css3

本文链接：https://blog.csdn.net/mafeilong618/article/details/107357025

版权

在开发横向滑动菜单时，遇到li元素使用display:inline-block后脱离ul内容区域的问题。排查发现，设置display:block-inline的元素可能导致排版错位。解决方法包括：设置vertical-align: top，设置overflow为hidden，或者直接使用float:left替代display:inline-block。

摘要由CSDN通过智能技术生成

今天在开发中要求写一个横向滑动的菜单，然后在给li设置display:inline-block后脱离ul内容的区域，后来经过分析以为是ul的高度给的不够，但是仔细分析后觉得不管多高都不应该脱离内容区域的。
先上代码:

 <div class="container">
            <ul class="list-tab">
                <li class="active">一汽大众一汽大众</li>
                <li>宝马宝马</li>
                <li>奔驰奔驰</li>
                <li>别克别克</li>
                <