CSS实现手机横向滑动菜单

经常使用的小布局,每次都忘记,简单记录一下
<div class="nav">
    <ul>
        <li>第一场</li>
        <li>第二场</li>
        <li>第三场</li>
        <li>第四场</li>
        <li>最终排名</li>
    </ul>
</div>
.nav{
    overflow: hidden;            /*最外层设置  溢出隐藏  */
}
.nav ul{
    white-space: nowrap;        /*第二层设置  不换行  */
    overflow-y: auto;                /*溢出框 提供滚动机制*/
}
.nav ul li{
    display: inline-block;              /*最内层div设置inline-block*/
}
  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

本篇文章非原创,点击此处查看原文

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号