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
}