inline-block列表项换行主因是HTML空格被渲染为间隙，导致宽度计算偏差；解决法包括父元素font-size:0+子元素重设字号、删空格或改用flex布局。
为什么 display: inline-block 后列表项还是换行？
因为 默认是块级元素，设成 inline-block 确实能横排，但 HTML 中的换行符和空格会被渲染为一个空格，导致项与项之间出现“看不见的间隙”——这会让最后一项容易掉到下一行，尤其在容器宽度紧绷时。
常见错误现象：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 测量就加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
