移动端 实现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;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM