ul 子元素过多时,显示水平滚动条

更新日期: 2020-04-08 阅读次数: 260 字数: 161 分类: CSS

当手机端排版时,如果 ul 中 li 过多,一行装不下时,希望显示水平滚动条,而不是折行。

flex 实现:

ul

display: flex;
overflow-x: auto;

li

flex: none;

如果不加 flex: none; 所有的 li 会自动压缩宽度,以适配当前容器宽度。而这不是我想要的效果。

overflow-x: auto; 与 overflow-x: scroll; 的区别

  • auto: 只有当内容溢出时,才显示滚动条
  • scroll: 无论是否溢出都显示滚动条。主要是为了布局统一,防止滚动条有无导致布局偏差。
领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

tags: flex 水平滚动条 flex 横向滚动条

相关文章

爱评论不评论

近期节日

2020年06月05日 世界环境日
2020年06月05日 芒种
2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
查看更多节日