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

更新日期: 2020-04-08 阅读次数: 7441 字数: 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: 无论是否溢出都显示滚动条。主要是为了布局统一,防止滚动条有无导致布局偏差。

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

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