Css实现移动端菜单左右滚动效果

 

html代码

<div class="s-menu">
    <ul>
        <li><a class="selected">待办<em>(0)</em></a></li>
        <li><a class="">进件<em>(0)</em></a></li>
        <li><a class="">合同<em>(0)</em></a></li>
        <li><a class="">签约<em>(0)</em></a></li>
        <li><a class="">请款<em>(0)</em></a></li>
        <li><a class="">放款/完结<em>(0)</em></a></li>
    </ul>
</div>

 

css代码

.s-menu{
    height: 2.1rem;
    padding: 0 .5rem;
    background: #fff;
    position: relative;
}
.s-menu ul{
    // 溢出隐藏，添加滚动条，添加手滑模式touch
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}
.s-menu li{
    display: inline-block;
    white-space: normal
}
.s-menu li a{
    display: block;
    padding: 0 .5rem;
    line-height: 2.1rem
}