导航出现横向滚动条

<ul class="navs-title">
    <li class="nav-li active">跑步</li>
<li class="nav-li active">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
<li class="nav-li">跑步</li>
</ul>

.navs-title {
width: 10rem;
height: .49333333rem;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
margin-top: .06666667rem;
}
.navs-title .nav-li {
display: inline-block;
width: 1.17333333rem;
height: .49333333rem;
box-sizing: border-box;
overflow: hidden;
margin-left: .46666667rem;
line-height: .49333333rem;
border-radius: .24rem;
font-size: .34666667rem;
color: #000;
text-align: center;
}

最后

以上就是灵巧学姐为你收集整理的导航出现横向滚动条的全部内容，希望文章能够帮你解决导航出现横向滚动条所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。