CSS实现移动端横向滚动导航条(PC端也适用)
程序员文章站
2022-03-02 11:31:00
功能由来近期在做一个h5需要一个横向滚动条,查看了一些文档最后还是决定自己写一个,一个可以兼容mobile、pc的。html
功能由来
近期在做一个h5需要一个横向滚动条,查看了一些文档最后还是决定自己写一个,一个可以兼容mobile、pc的。
html
<body> <div class="nav"> <a href="#">nav1</a> <a href="#">nav2</a> <a href="#">nav3</a> <a href="#">nav4</a> <a href="#">nav5</a> <a href="#">nav6</a> <a href="#">nav7</a> <a href="#">nav8</a> <a href="#">nav9</a> <a href="#">nav10</a> <a href="#">nav11</a> <a href="#">nav12</a> <a href="#">nav13</a> <a href="#">nav14</a> <a href="#">nav15</a> </div> <div> 内容区域 </div> </body>
css
.nav { width: 100%; height: 50px; line-height: 50px; /*段落中文本不换行*/ 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实现移动端横向滚动导航条(pc端也适用)的文章就介绍到这了,更多相关css横向滚动导航条内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!