本文为小伙伴们带来了关于CSS实现移动端横向滚动导航条,感兴趣的小伙伴一起来看看吧。
近期在做一个H5需要一个横向滚动条,查看了一些文档最后还是决定自己写一个,一个可以兼容Mobile、PC的。
内容区域
css;">.nav { width: 100%; line- /*段落中文本不换行*/ white-space: nowrap; /*阴影*/ box-shadow: 0 1px 2px rgba(0, 0, 0, .2); /*设置横向滚动*/ overflow-x: scroll; /*禁止纵向滚动*/ overflow-y: hidden; /*文本平铺*/ text-align: justify; /*背景颜色*/ background: #F4F5F6; padding: 0px 5px; margin-bottom: 10px; /*设置边距改变效果为内缩*/ box-sizing: border-box; } .nav a { color: #505050; /*取消超链接下划线*/ text-decoration: none; margin: auto 10px; } .nav::-webkit-scrollbar { /*隐藏滚动条*/ display: none; }
这样就实现了横向滚动导航是不是很简单
本文为小伙伴们带来了关于CSS实现移动端横向滚动导航条的全部内容了,感兴趣的小伙伴记得点击关注哦。