ol默认padding-left不统一，需重置为0并清margin；序号对齐应禁用list-style用li::before生成；右对齐推荐dir="rtl"；line-height和字体度量影响垂直对齐，优先调无单位line-height。
ol默认padding-left不统一，必须显式重置
浏览器对<ol></ol>的默认padding-left各不相同：Chrome 是 40px，Firefox 是 2.5em，Safari 又不同。不重置就会导致序号和文字视觉错位，这不是你 CSS 写错了，而是浏览器“自带偏移”。
关键操作只有两行：
-
ol { padding-left: 0; margin: 0; }—— 缺一不可，只清padding不管用，margin残留也会干扰父容器布局 - 若想序号顶格、文字从固定位置开始，可加
text-indent: -1.5em; padding-left: 1.5em;组合，但需配合box-sizing: border-box防意外撑宽
多行文本第二行不跟序号对齐？别信list-style-position: inside
list-style-position: inside看似让序号进入内容流，实则破坏基线对齐。超长文本换行后，第二行容易顶到序号下方，尤其在调整过line-height或用了自定义字体时更明显。
真正可控的做法是彻底放弃原生机制：
立即学习“前端免费学习笔记（深入）”；
-
ol { list-style: none; }—— 关掉默认编号 - 用
li::before生成编号：li::before { content: counter(list-item) ". "; counter-increment: list-item; } - 优先用
li::before而非li::marker，因 Safari ≤16.4 不支持后者，生产环境兼容性差
要右对齐序号？用dir="rtl"比CSS更可靠
仅靠text-align: right只能右对齐文字，序号仍卡在左边。而dir="rtl"是 HTML 原生属性，能整体翻转文本流，让序号自动跑到右侧，且语义正确、无障碍友好。
直接写：<ol dir="rtl"><li>Apple</li></ol>
注意事项：
- 若列表内含阿拉伯文等 RTL 文本，需在对应
<li>上加dir="ltr"覆盖 - 配合
text-align: right可强化右对齐效果，但非必需 - 不要用
float或负margin硬拉，会破坏文档流和键盘导航顺序
对齐异常常出在line-height和字体度量上
换字体后，哪怕 CSS 没动，序号和文字的垂直位置也可能偏移一两个像素——问题不在编号逻辑，而在line-height与字体自身度量（ascent/descent）的微小差异。
调试建议：
- 把
line-height设为无单位值（如1.05、1.1），避免继承放大误差 - 用 DevTools 的“Computed”面板检查
li的实际行高和字体度量，对比前后字体差异 - 若用
li::before，可加vertical-align: middle或top微调，但优先调line-height
最容易被忽略的是：排版整齐的第一道关卡不是 CSS，而是 HTML 结构本身是否合规——<ol></ol>里塞<div>或<code><p></p>会被浏览器自动修复，DOM 层级错乱后，再精细的 CSS 也难救。
