有序列表文字“不整齐”主因是html结构错误：等非法子元素被浏览器移出，导致缺失；必须每个条目用独立包裹，且内不可直接放文本或块级标签。
为什么有序列表文字看起来“不整齐”
不是 CSS 没生效，而是 HTML 结构本身被浏览器悄悄修正了。比如写成 <ol>第一步<br>第二步</ol>，<br> 不是 <ol></ol> 的合法子元素，浏览器会把它移出 <ol></ol> 外部，导致 DOM 中只剩一个 <li>（甚至没有），编号自然消失、文字堆叠。真正整齐的前提是：每个条目必须包裹在独立的 <li> 里，且不能在 <ol></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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><code>npm install axios</code>
注意三点：
- 不要把
<pre class="brush:php;toolbar:false;"><code></code> 放在 <code><li></code> 外面，否则编号和代码块脱节</pre> -
<p></p>、<strong></strong>、<pre class="brush:php;toolbar:false;"></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></ol>结构
最常被忽略的一点：排版问题八成源于第一层结构写错。检查 document.querySelectorAll('li').length 是否等于你预期的条目数，不等，就先修 HTML，别急着调 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
