有序列表文字“不整齐”主因是HTML结构错误：<br>等非法子元素被浏览器移出<ol>，导致<li>缺失；必须每个条目用独立<li>包裹，且<ol>内不可直接放文本或块级标签。
为什么有序列表文字看起来“不整齐”
不是 CSS 没生效，而是 HTML 结构本身被浏览器悄悄修正了。比如写成 <ol>第一步<br>第二步</ol>，<br> 不是 <ol> 的合法子元素，浏览器会把它移出 <ol> 外部，导致 DOM 中只剩一个 <li>（甚至没有），编号自然消失、文字堆叠。真正整齐的前提是：每个条目必须包裹在独立的 <li> 里，且不能在 <ol> 内直接放文本或块级标签。
怎么让 <li> 里的文字对齐又可控
默认 <li> 是块级元素，但它的内容流式渲染，换行、缩进、行高全受父级 padding-left 和 list-style-position 影响。常见失控点：
-
list-style-position: inside会让编号进入内容区域，一旦文字换行，第二行会和编号左缘不对齐 - 全局重置用了
ul, ol { padding-left: 0; }却忘了margin，导致列表项紧贴左边，编号被裁掉 - 用
text-indent手动调第一行缩进，结果编号跟着动，或只动文字不动编号
推荐做法：ol { list-style-position: outside; }（默认值，别改），再统一设 ol { padding-left: 2em; }，靠 padding 控制编号与文字的间距，稳定且可预测。
多行文字或复杂内容怎么塞进 <li>
<li> 允许嵌套块级元素，但必须语义合理。比如步骤说明带小标题和代码，可以这样写：
立即学习“前端免费学习笔记（深入）”；
<ol>
<li>
<strong>安装依赖</strong>
<p>运行以下命令：</p>
<pre><code>npm install axios</code></pre>
</li>
</ol>
注意三点：
- 不要把
<pre><code>放在<li>外面，否则编号和代码块脱节 -
<p>、<strong>、<pre>都可直接放在<li>内，HTML5 已明确允许 - 如果某步要加图标或自定义前缀（如 “⚠️ 注意：…”），别用
type属性硬凑，改用li::before { content: "⚠️ "; }+list-style: none
响应式下编号错位或挤出容器怎么办
横向空间不足时，浏览器可能把编号压进文字区，或整行换行导致编号悬空。这不是 bug，是 list-style 在窄屏下的固有行为。根本解法不是调 white-space，而是：
- 给
ol加overflow-x: auto，让长内容可滚动，保结构完整 - 用
li::marker { font-variant-numeric: tabular-nums; }让数字等宽，避免编号左右晃动 - 真要换行对齐，优先用
display: flex+flex-direction: column替代原生列表——但仅限纯展示场景；涉及语义（如步骤、条款）必须保留<ol><li>结构
最常被忽略的一点：排版问题八成源于第一层结构写错。检查 document.querySelectorAll('li').length 是否等于你预期的条目数，不等，就先修 HTML，别急着调 CSS。
