序号对齐需先明确方向与换行行为：清空ol默认padding/margin；右对齐用dir="rtl"；多行对齐禁用list-style-position:inside，改用list-style:none+li::before/::marker；自定义格式须用伪元素；垂直对齐关键在line-height与字体度量微调。
序号对齐不是“调一下 text-align 就行”，而是要先明确对齐方向（左/右/居中）和换行行为（是否保留缩进），再选对应方案。
ol 默认序号左对齐但文字错位？先清 padding 和 margin
浏览器给 <ol> 设的默认 padding-left 不统一：Chrome 是 40px，Firefox 是 2.5em，Safari 又不同。不重置就会导致序号和文字视觉脱节。
- 必须显式写：
padding-left: 0; margin: 0; - 若想文字从序号后紧贴开始，可加
text-indent: -1.5em; padding-left: 1.5em; - 仅设
text-align: left没用——它只影响文字内容，不影响序号位置
让序号和文字一起右对齐？用 dir="rtl" 最简可靠
别折腾 float 或负 margin。dir="rtl" 是 HTML 原生属性，能整体翻转文本流，使序号自动跑到右侧，且保持语义完整、无障碍友好。
- 写法：
<ol dir="rtl"><li>Apple</li></ol> - 配合
text-align: right可强化右对齐效果，但非必需 - 注意：若列表内含阿拉伯文、希伯来文等 RTL 文本，需额外用
dir="ltr"在<li>内覆盖
多行时第二行不跟序号对齐？list-style-position: inside 不推荐
list-style-position: inside 看似能让序号进入内容流，但实际会破坏基线对齐，超长文本第二行可能顶到序号下方或被截断，尤其在用了自定义字体或 line-height 时更明显。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 真正可控的做法是关掉默认序号：
list-style: none; - 改用
li::marker（现代写法）或li::before（兼容旧版）+counter(list-item) - 对齐难点不在编号内容，而在
vertical-align和line-height微调——常需试 0.9~1.1 之间的小数
需要自定义编号格式（如 “Step 1:”）？绕过 list-style-type
list-style-type 只支持内置类型（decimal、upper-roman 等），加前缀、图标、颜色都得用伪元素。
- 基础写法：
ol { list-style: none; } li::before { content: "Step " counter(list-item) ": "; } -
counter(list-item)能用，是因为<ol>默认已设counter-reset: list-item - Safari ≤16.4 不支持
li::marker，生产环境优先用li::before
最易被忽略的是：对齐问题往往出在 line-height 和字体度量上，而不是编号本身——换字体后，哪怕 CSS 没动，序号和文字的垂直位置也可能偏移一两个像素。
