ol默认padding-left不统一，需重置为0并清margin；序号对齐应禁用list-style用li::before生成；右对齐推荐dir="rtl"；line-height和字体度量影响垂直对齐，优先调无单位line-height。

ol默认padding-left不统一，必须显式重置

浏览器对

的默认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 原生属性，能整体翻转文本流，让序号自动跑到右侧，且语义正确、无障碍友好。

直接写：

1. Apple

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

注意事项：

• 若列表内含阿拉伯文等 RTL 文本，需在对应
• 上加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 结构本身是否合规——

里塞

或

会被浏览器自动修复，DOM 层级错乱后，再精细的 CSS 也难救。

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