功能由来

近期在做一个H5需要一个横向滚动条，查看了一些文档最后还是决定自己写一个，一个可以兼容Mobile、PC的。

HTML

    
        Nav1        Nav2        Nav3        Nav4        Nav5        Nav6        Nav7        Nav8        Nav9        Nav10        Nav11        Nav12        Nav13        Nav14        Nav15    
    
        内容区域    

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横向滚动导航条内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！