ol本身不支持固定宽度，需用counter+table-cell布局实现编号列固定、文本列自适应：li::before用counter()生成序号并设display:table-cell和width:1px，配合text-align:end，关闭原生list-style。
ol列表本身不支持固定宽度，必须用CSS模拟
HTML原生<ol></ol>的序号是渲染时生成的，没有独立盒模型，直接给<ol></ol>设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 }会导致：
- 序号和文字挤在同一行，长文本换行后首行缩进错乱
- 浏览器仍按默认
list-style-position: outside渲染，序号在容器外，不受width约束 - 响应式下序号可能被截断，尤其小屏
- 无障碍阅读器无法正确识别编号语义（原生
<ol></ol>的语义优势丢失）
真正需要关注的三个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兼容性好得多。
