必须重置ol默认样式并用CSS计数器或dir="rtl"实现精确对齐：浏览器默认padding/margin不统一，仅text-align无效；li::before最可控，dir="rtl"最简且语义正确。

为什么直接写

总是错位

浏览器给

设的默认样式不统一：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：

• 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::before fallback

序号右对齐最简可靠的方案

别折腾 float、负 margin 或 transform —— dir="rtl" 是 HTML 原生属性，能整体翻转文本流，让序号自动跑到右侧，且语义完整、无障碍友好。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 直接写：
  1. Apple
• 配合 text-align: right 可强化右对齐效果，但非必需
• 若列表内含阿拉伯文等 RTL 文本，需在
• 里加 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 全部锁定，否则每次换系统字体都可能破掉。

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