最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS实现移动端横向滚动导航条
时间:2022-10-26 编辑:坚强 来源:一聚教程网
本文为小伙伴们带来了关于CSS实现移动端横向滚动导航条,感兴趣的小伙伴一起来看看吧。
功能由来
近期在做一个H5需要一个横向滚动条,查看了一些文档最后还是决定自己写一个,一个可以兼容Mobile、PC的。
HTML
内容区域
CSS
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实现移动端横向滚动导航条的全部内容了,感兴趣的小伙伴记得点击关注哦。
-
上一个: css多种边框的实现代码展示
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26