美文网首页
移动端 实现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横向滚动条

    移动端 实现ul横向滚动条 隐藏滚动条

  • 移动端web开发:局部区域滚动

    要实现多个div水平排列,并且自动出现横向滚动条。本来以为只需父级ul元素的overflow-x:auto;ove...

  • CSS 技巧

    1、css ul li 如何实现 横向排列

  • CSS常用

    用css实现自定义虚线边框 超出显示省略号 单行文本 多行文本 隐藏移动端横向滚动条 最外层盒子高度和每个子项目的...

  • 盘点移动端适配方案

    盘点移动端适配方案 作为开发者,在手机移动端做适配的时候会出现很多问题:最不希望用户看到的就是横向滚动条。其次是文...

  • 移动端 隐藏横向滚动条

    解决思路:父元素设置高度100px 并设置overflow:hidden,子元素高度= 父元素高度+滚动条宽度(8...

  • tab导航栏横向滚动条-tabScroll

    tab导航栏横向滚动条-tabScroll 在vue中使用css实现的tab横向滚动条,效果如图:

  • 上下滚动条插件

    jquery——移动端滚动条插件iScroll.js

  • 导航栏实现横向滑动效果

    例如: 需求:导航栏实现横向滑动,适应移动端,当滑动到最后时,图标隐藏 css实现滑动效果: style样式: ....

  • CSS奇技淫巧(持续更新)

    1. 移动端css隐藏滚动条(ios上流畅滑动)解决方案 效果图: HTML代码: SCSS代码: 主要实现思路:...

网友评论

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

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