HTML中无法可靠对齐列表项的根本原因是用空格占位，应改用CSS控制布局：如inline-block+text-align、dl语义化标签或flex布局。
HTML 中 无法可靠对齐列表项的原因
直接在 <li> 里塞多个 来“对齐”文字，本质是用不可见字符强行占位——这在不同字体、字号、浏览器渲染引擎下表现不一致，且一旦内容长度变化或响应式缩放，对齐立刻崩坏。它不是排版手段，而是临时补丁，容易引发维护混乱。
用 CSS text-align + display: inline-block 控制对齐
真正可控的方式是放弃空格占位，改用 CSS 控制文本块的布局行为。适用于需要左/右/居中对齐的简单列表项（比如带编号的说明项）：
- 给
<li>设置display: inline-block和固定宽度，再配合text-align - 避免用
float或margin-left模拟缩进，否则响应式时易错位 - 若需“编号+文字”严格对齐，建议把编号抽成
<span class="num">单独控制宽度
<style>
.list-item {
display: inline-block;
width: 80px;
text-align: right;
}
.num {
display: inline-block;
width: 24px;
text-align: right;
}
</style>
<ul>
<li><span class="num">1.</span> 配置 Webpack</li>
<li><span class="num">10.</span> 启动开发服务器</li>
</ul>
用 <dl> 替代 <ul> 处理键值型对齐需求
当列表实际是“标签-描述”结构（如配置项、API 参数说明），<dl> 是语义正确且天然支持对齐的方案，比硬塞空格或 flex 更轻量稳定：
-
<dt>默认为块级，可设固定宽 +float: left或display: inline-block -
<dd>紧跟其后，用margin-left避免文字顶到标签上即可 - 无需 JavaScript 或额外 class，兼容性好（IE8+）
<dl style="font-family: monospace;"> <dt style="display:inline-block;width:120px;">port:</dt> <dd>3000</dd> <dt style="display:inline-block;width:120px;">host:</dt> <dd>"localhost"</dd> </dl>
Flex 布局对齐长列表项的注意事项
对复杂多列、动态内容或需换行对齐的场景，display: flex 是首选，但必须注意几个易错点：
立即学习“前端免费学习笔记（深入）”；
- 父容器（
<ul>）设display: flex会让所有<li>横向排列，通常应改为给每个<li>内部设display: flex - 用
flex: 0 0 auto控制编号区域不伸缩，文字区域用flex: 1自适应 - 避免在 flex 容器里混用
对齐这件事，核心不是“怎么加空格”，而是“谁该负责宽度、谁该负责位置”。用空格对齐，等于把样式逻辑写进了 HTML 内容里，后续改字体、加图标、做国际化时，第一个崩溃的就是这些 。
