列表项左侧缩进不一致的根源在于list-style-position默认为outside导致符号与文本边界分离，应统一设为inside并用padding-left控制；避免margin-left叠加干扰，同时需统一box-sizing、line-height和font-family以确保渲染一致。
列表项 li 左侧缩进不一致？先查 list-style-position
默认情况下，ul 或 ol 的项目符号（如圆点、数字）被渲染在内容区域外，浏览器会为它们额外预留空间，但这个空间不参与盒模型计算，导致视觉上 li 文本起始位置参差不齐。关键控制属性是 list-style-position：
-
list-style-position: outside（默认）：符号在内容框外，padding-left不影响符号位置，但文本左边缘会因字体、行高微小差异而“看起来”没对齐 -
list-style-position: inside：符号纳入内容框内，此时padding-left直接作用于整个li，文本与符号共用同一左边界，更容易对齐
推荐统一设为 inside，再配合固定 padding-left 控制整体缩进。
用 padding 替代 margin 统一列表内边距
很多人习惯给 li 加 margin-left 来缩进，但这会导致：
- 父容器
ul的padding-left和子项margin-left叠加，实际缩进不可控 - 最后一项可能多出多余空白（尤其用
:last-child修正时易漏） - 响应式下
margin不如padding稳定（例如 flex 容器中 margin 行为有差异）
正确做法是清空 ul 默认 padding，改用 padding-left 统一控制所有项的左侧基准线：
立即学习“前端免费学习笔记（深入）”；
ul {
padding-left: 24px; /* 所有 li 文本左边缘从此处开始 */
list-style-position: inside;
}
li {
margin: 0; /* 彻底清掉干扰项 */
}字体、行高、box-sizing 不一致也会破坏对齐
即使样式写对了，以下细节仍会让列表“看似没对齐”：
-
font-family在不同系统/浏览器中渲染宽度不同，尤其中文混排时标点或空格占位浮动 -
line-height若设为无单位数值（如1.5），会继承并乘以当前字体大小，导致不同字号的li基线偏移 - 未声明
box-sizing: border-box，当后续加border或outline时，尺寸溢出破坏对齐
稳妥写法：
ul, li {
box-sizing: border-box;
line-height: 1.5; /* 推荐用具体数值而非 unitless，避免继承放大 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}嵌套列表缩进失控？用 counter + ::before 彻底接管
当需要多层嵌套且每层缩进严格相等（比如文档大纲），靠 padding-left 层层叠加极易错位。此时放弃原生 list-style，改用 CSS 计数器手动控制：
ol {
counter-reset: section;
padding-left: 0;
}
ol li {
counter-increment: section;
padding-left: 24px;
}
ol li::before {
content: counters(section, ".") ". ";
display: inline-block;
width: 48px; /* 固定编号区域宽度，保证文本左对齐 */
text-align: right;
margin-right: 8px;
}这样每层编号宽度一致，文本起始位置完全由 width + margin-right 决定，不再依赖浏览器对原生列表符号的渲染逻辑。
真正难的不是写对某一行样式，而是意识到：列表对齐问题往往不是单一属性能解决的，它横跨盒模型、字体渲染、计数机制三层。一旦发现对不齐，优先检查 list-style-position 和 padding/margin 混用，再往下挖字体与 box-sizing —— 这个顺序踩坑最少。
