最直接的方法是给或设置padding-left或margin-left，而非作用于；配合list-style-position: outside可精准控制缩进，嵌套列表需重置后逐级定义，推荐使用rem/em单位提升响应式健壮性。

用 margin-left 或 padding-left 控制列表缩进最直接

HTML 列表（<ul></ul>、<ol></ol>）默认有浏览器内置的缩进，想精确控制，不能靠 <li> 里加空格或  ，得用 CSS。核心是作用在列表容器（<ul></ul> 或 <ol></ol>）上，而不是单个 <li>。

常见错误是给 <li> 设 margin-left，结果每项都额外偏移，层级混乱；正确做法是调整整个列表的左内边距或外边距：

• padding-left：缩进内容区域，文本和项目符号一起向右移
• margin-left：移动整个列表块，项目符号和文本整体偏移，但可能影响与其他元素的间距
• 设为 0 可彻底去除默认缩进，再按需加值（如 20px、1.5em）

list-style-position 决定项目符号是否计入缩进

这个属性常被忽略，但它直接影响“缩进感”。它有两个关键值：

• outside（默认）：项目符号在 padding 区域外，文本从 padding-left 起始 —— 此时调 padding-left 是最直观的缩进方式
• inside：项目符号被拉进内容区，文本换行后会与首行对齐，此时改 padding-left 效果变弱，更适合用 text-indent 配合

例如：

ul { list-style-position: inside; padding-left: 0; }

后，若还需缩进，就得给 <li> 加 text-indent: 1.5em，否则文字顶到左边。

立即学习“前端免费学习笔记（深入）”；

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

嵌套列表缩进要避免级联失控

多层 <ul><ul><li></ul></ul> 时，浏览器默认会逐层叠加缩进。如果统一设 padding-left: 20px，内层会变成 40px、60px……容易过宽。

稳妥做法是重置所有嵌套层级，再用选择器单独控制：

• 先全局清空：

  ul, ol { padding-left: 0; margin-left: 0; }

• 再按需定义层级：

  ul { padding-left: 20px; }<br>ul ul { padding-left: 30px; }<br>ul ul ul { padding-left: 40px; }

• 或用 em 单位更灵活：ul { padding-left: 1.5em; } ul ul { padding-left: 2em; }

用 rem 或 em 比 px 更健壮

固定像素值（如 padding-left: 24px）在响应式场景下容易僵硬。字体缩放、用户设置大号字时，px 缩进不会等比变化，视觉失衡。

em 相对于父元素字体大小，rem 相对于根字体大小，更适合语义化缩进：

• padding-left: 1.5rem：始终是根字号的 1.5 倍，适合全局统一节奏
• padding-left: 2em：继承自父 <ul></ul> 的 font-size，适合局部微调
• 注意：如果父元素 font-size 被重设过（比如 ul { font-size: 0.9em; }），em 值会连锁变化，这时 rem 更稳

真正麻烦的是混合使用 list-style-position: inside + em/rem + 多语言列表（如中文无项目符号），缩进基准容易漂移——这种时候建议回归 padding-left + outside 组合，最可控。