移动端 实现ul横向滚动条

    ul {
        display: flex;
        width: 100%;
        height: 3.333333rem;
        background: #fff;
        padding: 0.373333rem 0.32rem 0;
        box-sizing: border-box;
        /* 下面是实现横向滚动的关键代码 */
        display: inline;
        float: left;
        white-space: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch; /*解决在ios滑动不顺畅问题*/
        overflow-y: hidden;
    }
    ul li {
        display: inline-block;  /*设置li为行内块级元素*/
        width: 3.6rem;
        height: 2.24rem;
        text-align: left;
        border-radius: 6px 6px 6px 6px;
        margin-right: 0.373333rem;
    }    

 隐藏滚动条

ul::-webkit-scrollbar {
    display: none;
}

 

转载于:https://www.cnblogs.com/stella1024/p/7799920.html