必须重置ol默认样式并用CSS计数器或dir="rtl"实现精确对齐：浏览器默认padding/margin不统一，仅text-align无效；li::before最可控，dir="rtl"最简且语义正确。
为什么直接写 <ol></ol> 总是错位
浏览器给 <ol></ol> 设的默认样式不统一：Chrome 是 padding-left: 40px，Firefox 是 2.5em，Safari 又不同；margin 也各不相同。不重置就永远没法精确对齐序号和文字。
必须显式写：padding-left: 0 和 margin: 0 —— 这不是可选项，是前提。
- 仅设
text-align: left没用：它只影响文字内容，不影响序号位置 - 想让文字从序号后紧贴开始，可用
text-indent: -1.5em; padding-left: 1.5em -
list-style-position: inside看似省事，但会导致换行时第二行顶到序号下方，尤其在自定义字体或line-height下更明显
长文本换行后第二行怎么对齐序号起始位置
原生 list-style-position: outside（默认）把序号放在盒子外侧，换行时第二行只认 padding-left，视觉上就“脱节”了。
真正可控的做法是关掉默认序号，改用 CSS 计数器 + li::before 或 li::marker：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
ol { list-style: none; counter-reset: item; }li { position: relative; padding-left: 2.5em; }-
li::before { content: counter(item) ". "; position: absolute; left: 0; width: 2em; text-align: right; }（多位数字靠右对齐防错列） - Safari ≤16.4 不支持
li::marker，生产环境优先用li::beforefallback
序号右对齐最简可靠的方案
别折腾 float、负 margin 或 transform —— dir="rtl" 是 HTML 原生属性，能整体翻转文本流，让序号自动跑到右侧，且语义完整、无障碍友好。
- 直接写：
<ol dir="rtl"><li>Apple</li></ol> - 配合
text-align: right可强化右对齐效果，但非必需 - 若列表内含阿拉伯文等 RTL 文本，需在
<li>里加dir="ltr"覆盖 - 注意：
dir="rtl"会影响整个列表的排版流向，比如缩进方向、标点位置，不能只当“对齐开关”用
最容易被忽略的对齐细节
对齐问题往往不出在编号本身，而出在 line-height 和字体度量上——换字体后，哪怕 CSS 没动，序号和文字的垂直位置也可能偏移一两个像素。
微调关键值：line-height: 0.95～1.05，或加 vertical-align: middle（对 li::marker 或 li::before 生效）。
真正在意对齐精度时，得把字体、字号、line-height、font-feature-settings 全部锁定，否则每次换系统字体都可能破掉。
