ol默认对齐错位是因浏览器padding-left不统一，需重置padding-left:0和margin:0；用li::before或li::marker自定义序号更可靠；dir="rtl"可实现序号右对齐且语义正确。

ol 默认的文本对齐是“序号左贴边、文字缩进”，但视觉上常显得错位——这不是你 CSS 写错了，而是浏览器给 ol 设了不统一的 padding-left（Chrome 40px、Firefox 2.5em、Safari 又不同），必须显式重置。

先清默认边距：padding-left: 0 和 margin: 0 缺一不可

只设 text-align: left 没用，它只影响文字内容，不影响序号位置。真正起作用的是清除浏览器默认的外边距和内边距：

• ol 必须加 padding-left: 0，否则序号和文字永远有“漂移感”
• 顺手加上 margin: 0，避免外边距干扰父容器布局
• 若想序号顶格、文字从固定位置开始，可用 text-indent: -1.5em; padding-left: 1.5em; 组合

长文本换行后第二行怎么对齐序号起始位置？别信 list-style-position: inside

这个属性看似“让序号进入内容流”，实则破坏基线对齐：超长文本第二行容易顶到序号下方，尤其在自定义字体或调整 line-height 后更明显。可靠做法是关掉原生机制：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 设 list-style: none 彻底禁用默认序号
• 用 li::before 或现代写法 li::marker + counter(list-item) 生成编号
• li::marker 更简洁，但 Safari ≤16.4 不支持，生产环境建议优先用 li::before

需要右对齐或居中？用 dir="rtl" 比 text-align 管用

仅靠 text-align: right 只能右对齐文字，序号仍卡在左边。而 dir="rtl" 是 HTML 原生属性，能整体翻转文本流，让序号自动跑到右侧，且语义完整、无障碍友好：

• <ol dir="rtl"></ol> 就够了，无需额外 CSS
• 配合 text-align: right 可强化右对齐效果（非必需）
• 若列表内含阿拉伯文等 RTL 文本，需在对应 li 上加 dir="ltr" 覆盖

最容易被忽略的是：对齐问题往往出在 line-height 和字体度量上——换字体后，哪怕 CSS 没动，序号和文字的垂直位置也可能偏移一两个像素。

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