ol序号左对齐“悬空”是因浏览器默认margin-left或padding-left与list-style-position:outside叠加所致，须重置ol{margin:0;padding-left:0}，text-align:left无效；文字紧贴序号可用text-indent:-1.5em;padding-left:1.5em。

ol/li 序号左对齐为什么总“悬空”？ 浏览器给 ol 设的默认样式包含 margin-left: 40px（Chrome）或 padding-left: 2.5em（Firefox），而 list-style-position: outside 让序号画在内容框外——两者叠加，序号就“飘”在左边空白里，文字却从缩进后开始。这不是 bug，是规范行为，但视觉上就是不对齐。

• 必须显式重置：ol { margin: 0; padding-left: 0; }
• 仅设 text-align: left 没用：它只影响 li 内文本，不控制序号位置
• 若想文字紧贴序号后，可用 text-indent: -1.5em; padding-left: 1.5em;，但需配合字体尺寸微调

ul 项目符号左对齐但整体要居中？别碰 text-alignul 居中不是靠 text-align: center，那是针对内联内容的；真正有效的是让容器自身水平居中：

• 给 ul 加 width: fit-content; + margin-inline: auto;
• 避免用 display: flex 包 ul：flex 容器会让 li 忽略 list-style，序号消失
• 若父容器已是 flex/grid，必须给每个 li 显式加 list-style: disc; 或 list-style: square;

表格里 td/th 怎么左对齐才可靠？table 元素本身不渲染文本，所以 table { text-align: left; } 完全无效。生效的只有作用在单元格上的规则：

• 正确写法：td, th { text-align: left; }
• 表头通常要居中？那就单独覆盖：th { text-align: center; }
• 父容器若设了 text-align: center，会继承干扰，必须显式重置子元素
• 别用废弃的 align="left" 属性：W3C 已弃用，Safari 行为不一致，且无法覆盖 CSS

多行列表项第二行不跟序号对齐？inside 是陷阱list-style-position: inside 看似简单，实际会让序号进入文本流，导致超长 li 的第二行顶到序号下方，尤其在自定义 line-height 或非等宽字体下更明显。

• 更稳方案：关掉默认序号，用伪元素重建
• ol { list-style: none; }
• li::marker { content: counter(list-item) ". "; }（现代写法，Safari ≥17 支持）
• 兼容旧版 Safari（≤16.4）：改用 li::before { content: counter(list-item) ". "; } + counter-increment: list-item;

真正容易被忽略的是：对齐问题常源于 line-height 和字体度量差异——换字体后，哪怕 CSS 没动，序号和文字的垂直位置也可能偏移一两个像素。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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