最直接有效的方式是覆盖 ul/ol 的 padding-left；margin-left 加在 li 上可能破坏嵌套对齐；需注意 RTL、响应式、CSS 重置及 Flex 布局下的适配问题。
用 margin-left 或 padding-left 直接控制列表项缩进
HTML5 本身不提供“缩进量”属性，列表项（）的缩进由浏览器默认样式决定，实际是通过 ul 和 ol 的 padding-left 实现的。想调缩进，最直接有效的方式就是覆盖这个值。
-
padding-left改的是列表容器（ul/ol）左侧内边距，影响所有子li的整体起始位置，推荐优先使用 -
margin-left加在li上也能视觉上右移，但可能破坏嵌套列表的层级对齐，慎用 - 避免设
text-indent——它只缩进首行，对换行的li内容无效
ul.custom-list {
padding-left: 20px; /* 替换默认的 40px */
}
/* 如需更精细控制，可针对特定层级 */
ul.custom-list ul {
padding-left: 15px;
}
禁用默认缩进再手动重设（适合彻底自定义）
某些模板或 CSS 框架（如 Bootstrap）会重置 ul 样式，导致 padding-left 不生效。此时要先清除默认值，再重新设定。
- 检查浏览器开发者工具中
ul元素的 computed styles，确认padding-left是否被覆盖或设为0 - 用
list-style: none移除项目符号后，缩进常被一并清掉，必须显式补上padding-left - 若用
display: flex或grid布局li，默认缩进机制完全失效，缩进需靠gap或margin单独处理
ul.reset-list {
list-style: none;
padding-left: 0; /* 清除默认 */
}
ul.reset-list li {
padding-left: 24px; /* 手动加缩进 */
position: relative;
}
ul.reset-list li::before {
content: "•";
position: absolute;
left: 0;
}
响应式缩进：不同屏幕宽度用不同缩进量
移动端窄屏下过大的缩进会挤占内容空间，需要媒体查询动态调整。
- 不要只写一个固定像素值，比如
padding-left: 32px，在小屏上可能让文字贴边甚至溢出 - 用
rem或em更稳妥，能随根字体缩放；ch单位适合按字符宽度控制（如padding-left: 2ch≈ 两个字符宽） - 嵌套列表（
ul ul）在小屏建议统一收窄，避免多层缩进叠成“锯齿”
@media (max-width: 768px) {
ul.responsive-list {
padding-left: 16px;
}
ul.responsive-list ul {
padding-left: 12px;
}
}
注意 direction 和 RTL 语言下的缩进方向
如果网站支持阿拉伯语、希伯来语等从右向左（RTL）语言，padding-left 会变成右侧缩进，逻辑反了。
- 改用逻辑属性：
padding-inline-start代替padding-left，它会自动适配 LTR/RTL - 同理，
margin-inline-start比margin-left更安全 - 旧浏览器（如 IE）不支持逻辑属性，需加
padding-left/padding-right回退
ul.rtl-safe {
padding-inline-start: 20px; /* 自动适配方向 */
padding-left: 20px; /* IE 回退 */
padding-right: 20px; /* IE 回退 */
}
缩进看着简单，但混入 RTL、响应式、CSS 重置、Flex 布局后，padding-left 可能根本不起作用——得先看 computed styles 确认生效的是哪条规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
