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;
ol { margin: 0; padding-left: 0; }
text-align: left 没用：它只影响 li 内文本，不控制序号位置text-indent: -1.5em; padding-left: 1.5em;，但需配合字体尺寸微调ul 居中不是靠 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;
td, th { text-align: left; }
th { text-align: center; }
text-align: center，会继承干扰，必须显式重置子元素align="left" 属性：W3C 已弃用，Safari 行为不一致，且无法覆盖 CSSlist-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 没动，序号和文字的垂直位置也可能偏移一两个像素。
