美文网首页
移动端 实现ul横向滚动条

移动端 实现ul横向滚动条

作者: 岚平果 | 来源:发表于2020-04-15 14:35 被阅读0次

    移动端 实现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;
        }  
    
    1. 隐藏滚动条
    ul::-webkit-scrollbar {
        display: none;
    }
    

    相关文章

      网友评论

          本文标题:移动端 实现ul横向滚动条

          本文链接:https://www.haomeiwen.com/subject/dzscvhtx.html