CSS横向列表布局技巧详解

常见错误现象：ul 宽度 100%，5 个 li 各占 20%，结果第 5 个仍换行；或者用 font-size: 0 在父元素上压空格，但子元素忘了重设字体大小，文字直接消失。

• 给 ul 设置 font-size: 0，再给 li 单独设回正常字号（如 font-size: 14px）
• 或把所有 li 写在同一行、不留 HTML 空格（不推荐，可维护性差）
• 更稳妥的替代方案：直接用 display: flex 配 flex-wrap: nowrap，现代浏览器全覆盖，且无间隙问题

inline-block 和 flex 横向排列的实际差异

二者都能让列表横排，但行为逻辑完全不同：inline-block 本质是“行内盒子”，受文本流影响；flex 是独立布局上下文，对齐、间距、溢出控制更直接。

使用场景：如果只是简单导航栏、图标组，且需兼容 IE9+，inline-block 还能用；但凡涉及等宽分布、自动换行控制、垂直居中，flex 是唯一合理选择。

• inline-block 的 vertical-align 默认是 baseline，图片和文字混排时容易错位，得手动调成 top 或 middle
• flex 下 align-items 默认居中，无需额外处理基线对齐
• inline-block 无法用 justify-content: space-between 均分空白，只能靠 margin 或 text-align 折腾

IE8–IE9 下 inline-block 的兼容写法

IE8 不支持对非原生行内元素（比如 div、li）设置 display: inline-block，必须加 zoom: 1 触发 hasLayout 才生效。

错误写法：li { display: inline-block; } —— IE8 下完全无效；正确写法必须带 hack：

li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

注意：*display 和 *zoom 是 IE6–IE7 的 hack，IE8–IE9 虽已支持 inline-block，但部分文档模式下仍有 bug，所以保险起见仍建议保留。

横向列表内容溢出时的截断处理

横向排列后，若内容过长又没设宽，inline-block 元素会撑开父容器，甚至破坏布局；而 flex 默认不换行，溢出时直接跑出视口，看不见。

• 对 li 加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 可截断单行文本
• 但必须同时设 width 或 max-width，否则 text-overflow 不生效
• Flex 容器中，若想让某一项收缩自适应，得给它加 flex: 1 或 flex: 0 1 auto，而不是只靠 overflow

横向列表真正麻烦的从来不是怎么排，而是内容长度不可控时，如何让截断、缩放、响应式切换都自然发生——这时候别硬扛 inline-block，该切 flex 就切，该加 JS 测量就加。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~