移动端横向导航栏隐藏滚动条,但保留滑动效果

HTML结构

<nav>  

        <ul>            

                 <li>                    

                     <a>基础医学</a>         

                 </li>       

                 <li>

                      <a>预防医学</a>

                 </li>

                   ....................//可加多个li

          </ul>

</nav>


css部分

nav ul{

width:1000px;      //设置横向导航栏的宽度,设置一个大于屏幕的宽度,才能实现滑动效果

}


nav{

overflow:hidden;  //超出屏幕部分隐藏

overflow-x:auto;  // x轴自适应

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,909评论 0 1
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,071评论 0 66
  • 横向滚动条怎么出来?很多人肯定以为是:overflow-x:scroll;当然这是可以的; 我们来试一下、、、 ....
    小心鲨鱼阅读 6,185评论 0 2
  • 前两天隔壁发了个百度地图贴心小记。 周末出门浪的时候我也打开了百度地图查路线。 哎哟好贴心,终于会指引上阶梯跟走匝...
    羊咩咩咩咩咩咩咩咩咩阅读 286评论 6 2