ol本身不支持固定宽度，需用counter+table-cell布局实现编号列固定、文本列自适应：li::before用counter()生成序号并设display:table-cell和width:1px，配合text-align:end，关闭原生list-style。

ol列表本身不支持固定宽度，必须用CSS模拟

HTML原生

的序号是渲染时生成的，没有独立盒模型，直接给

设width只会约束内容区域，序号对齐和换行仍不可控。真需求其实是“让编号列固定、文本列自适应”，这得靠counter + table-cell布局实现。

用counter + display: table-cell控制编号列宽度

核心是把每项拆成两格：一格放序号（右对齐+固定最小宽度），一格放内容（左对齐+弹性撑开）。关键点不是“设ol宽”，而是让序号列视觉上“固定”：

• li::before用counter()生成序号，display: table-cell使其参与表格布局
• width: 1px配合text-align: end和padding-inline-end，实际宽度由最长序号撑开，但不会因内容变窄
• 必须关闭原生list-style，否则序号会叠加显示
• 如果序号超5位（如99999），width: 1px仍有效——它只是触发“最小宽度优先”行为，内容会自动撑开

为什么ol { width: 200px }没用？

直接写ol { width: 200px }会导致：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 序号和文字挤在同一行，长文本换行后首行缩进错乱
• 浏览器仍按默认list-style-position: outside渲染，序号在容器外，不受width约束
• 响应式下序号可能被截断，尤其小屏
• 无障碍阅读器无法正确识别编号语义（原生
  的语义优势丢失）

真正需要关注的三个CSS属性

不是width，而是这三个配合才能稳住编号列：

• counter-reset：重置计数器，避免嵌套ol干扰
• display: table-row（在li上）：让li成为表格行，使::before和内容能对齐
• width: 1px（在li::before上）：这是最关键的“锚点”，它不设死宽度，却强制浏览器按内容最小宽度分配空间，比写min-width: 3em更可靠——因为序号位数变化时无需改CSS

复杂点在于：序号宽度最终由最长那一项决定，所以如果你的列表从第1条跳到第99999条，视觉上编号列会突然变宽。这没法完全避免，但width: 1px能确保它只扩不缩，且始终右对齐。其他方案（比如用flex）在IE或旧Safari里容易崩，而table-cell兼容性好得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！