最直接可靠的方式是将 ol 设为 flex 布局并隐藏默认序号，用 counter-reset/increment 配合 ::before 伪元素恢复语义化序号，同时通过 overflow-x: auto 和 white-space: nowrap 防止小屏溢出与截断。
用 CSS 的 display: flex 让 ol 横向排列
默认 ol 是垂直堆叠的，想让它横排，最直接可靠的方式是把列表容器设为 flex 布局。注意：必须作用在 ol 元素本身，而不是它的 li 子项。
常见错误是只给 li 加 display: inline-block，这会导致序号（如 1.、2.）和文字分离、对齐错乱，且无法控制间距或换行逻辑。
ol {
display: flex;
list-style: none; /* 隐藏默认序号，避免和自定义序号冲突 */
padding: 0;
margin: 0;
}
ol li {
margin-right: 16px; /* 控制项间距 */
counter-increment: item; /* 若需保留数字序号，配合伪元素使用 */
}
ol li::before {
content: counter(item) ". ";
font-weight: bold;
}
保留原生序号时用 flex + counter-reset
原生 ol 的序号由浏览器自动管理，但一旦设 display: flex，默认序号会消失。若仍想用语义化序号（比如 SEO 或无障碍需求），就得手动接管计数逻辑。
-
ol上加counter-reset: item - 每个
li用counter-increment: item - 用
::before伪元素生成内容，content: counter(item) - 别忘了清除默认
list-style，否则原生序号和伪元素会重叠
响应式横向 ol 要防溢出和截断
横排后容易在小屏上撑破容器，尤其当 li 内容较长或数量多时。不能只依赖 flex-wrap: wrap —— 它会让列表“折行”，但 ol 的语义是线性序列，折行后序号顺序视觉上易混淆。
更稳妥的做法：
- 给
ol设overflow-x: auto+scrollbar-width: none（Firefox）或-webkit-scrollbar隐藏（Chrome/Safari） - 限制
li最大宽度，用white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 避免在
li里放块级元素（如div、p），它们会破坏flex行内流式表现
不推荐用 float 或 inline-block 的原因
老方案常让 li 浮动或设 inline-block，但问题明显：
-
float需要额外清除浮动，ol高度塌陷，维护成本高 -
inline-block会把换行符/空格渲染成空白间隙，导致项间距不可控 - 两者都不支持
gap、justify-content等现代对齐能力 - 在 Flexbox 兼容已覆盖 IE11+ 的今天，没必要退回到脆弱布局
真正要注意的是：如果项目必须支持 IE10 或更早版本，flex 不可用，此时才需回退到 inline-block 并手动消除空白（比如把 ol 的字体大小设为 0，再给 li 单独设字体大小）——但这种场景现在极少见了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
