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

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

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

.container{
    height:0.5rem;

}
.list-tab{
    height:0.5rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(232, 232, 232, 1);
    border-radius:0.1rem;
    display: block;
    overflow-y: hidden; 
    overflow-x: auto; 
    white-space:nowrap;
    width: auto;
    display: block;
}
.list-tab li.active{
    background:rgba(78,96,234,1);
    color: #FFFFFF;
}

  /*隐藏滚轮*/
::-webkit-scrollbar {
    display: none;
}

.list-tab li{
    width: auto;
    /* width:19%; */
    height:0.48rem;
    border-radius:0.1rem;
    margin-right: 0.25rem;
    font-size:0.24rem;
    font-family:Microsoft YaHei;
    font-weight:400;
    line-height:0.5rem;
    color:rgba(51,51,51,1);
    text-align: center;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    cursor:pointer;
    display: inline-block;
}

然后这样就出现了问题，在度娘上查找了很多方法都是这样的，一点都没解决问题，然后觉得就是display的问题，后来一查还真是它的问题；设置display:block-inline的li或div中添加文字后，会导致li或div排版掉落、错位，
解决：
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
说到底设置display为inline-block没错，错在浏览器的vertical-align的默认值为baseline，所以很明显的一个办法是为li设置vertical-align为top，
第二个方法是设置overflow设置为hidden
第三个方法是干脆不设置display，直接设置float为left