0514-86177077
9:00-17:00（工作日）
近期在做一个H5需要一个横向滚动条，查看了一些文档最后还是决定自己写一个，一个可以兼容Mobile、PC的。
<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>
.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横向滚动导航条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
标签：绥化 湘西 焦作 试驾邀约 无锡 钦州 铜陵 湖北
上一篇：css实现滚动时选中区域字体颜色加深的示例代码
下一篇：CSS3过渡旋转透视2d3d动画等效果的实例代码
