上一篇
如何快速去除HTML li元素的缩进？
在HTML中，li元素默认有缩进（通常由浏览器的默认样式表设置，如margin或padding），要去掉缩进，可以通过CSS重置margin和padding属性，设置ul或ol的padding-left为0，并设置li的list-style-type为none（如果需要去掉项目符号）以及调整其他相关样式。
在HTML中,<li>元素的默认缩进是由浏览器内置样式表（User Agent Stylesheet）决定的，不同浏览器的默认值略有差异，但通常由以下两个因素共同作用：
- 父元素
<ul>/<ol>的左内边距（padding-left） - 列表标记（圆点/数字）的定位空间
完全去除缩进（无标记保留）
若需彻底消除缩进且不需要列表标记（圆点/数字），直接重置父元素和列表项的样式：
ul, ol {
padding-left: 0; /* 清除父容器内边距 */
margin-left: 0; /* 清除父容器外边距 */
list-style-type: none; /* 移除列表标记 */
}
保留列表标记但减少缩进
若需保留标记但调整缩进位置,通过::marker伪元素控制标记位置：
ul, ol {
padding-left: 1em; /* 根据需求调整（推荐1em-2em） */
}
li::marker {
margin-right: 0.5em; /* 控制标记与文本间距 */
}
精确控制标记对齐（推荐方案）
使用list-style-position: inside;将标记纳入文本流，实现精准对齐：
ul, ol {
padding-left: 0;
list-style-position: inside; /* 标记与文本左对齐 */
}
针对特定列表的解决方案
通过CSS类名精准控制目标列表：
<style>
.no-indent-list {
padding-left: 0;
list-style: none; /* 同时移除标记 */
}
</style>
<ul class="no-indent-list">
<li>列表项无缩进</li>
</ul>
关键原理说明
| 样式属性 | 作用说明 | 推荐值 |
|---|---|---|
padding-left |
清除列表容器左侧内边距 | 0（完全去除） |
list-style-type |
控制列表标记显示（圆点/数字） | none（隐藏） |
list-style-position |
标记定位（内部/外部） | inside（对齐） |
::marker |
自定义标记样式（现代浏览器支持） | 调整间距/颜色 |
浏览器兼容性提示：
- 旧版IE不支持
::marker伪元素，需用list-style-position替代- 使用
padding-left:0时，部分浏览器仍需配合margin-left:0
最终建议方案
/* 通用解决方案（兼容性好） */
ul.no-indent, ol.no-indent {
padding-left: 0;
margin-left: 0;
list-style: none; /* 同时移除标记 */
}
/* 保留标记但对齐左侧 */
ul.aligned-list, ol.aligned-list {
padding-left: 1.5em;
list-style-position: inside;
}
引用说明：本文解决方案参考MDN Web Docs对CSS Lists的权威解读，并遵循W3C标准实现跨浏览器一致性。
