建站|CSS实现移动端横向滚动导航条(PC端也适用)
功能由来
近期在做一个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端也适用)的内容到这里就结束了，喜欢的话可以给我们点赞鼓励~
