优先使用 list-style-position: inside 实现 ol 缩进，使编号进入内容区后通过 text-indent 或 padding-left 统一控制；现代浏览器可用 ::marker 精准调整编号位置；兼容性要求高时用 css counter 模拟序号。
ol 默认不支持 text-indent，直接设无效
很多开发者试过给 <ol></ol> 或 <li> 加 text-indent: 2em，发现编号和文字一起缩进了，或者根本没反应——这是因为 <li> 的编号（marker）默认是内联渲染且脱离文本流的，text-indent 只作用于第一行文本内容，不控制 marker 位置。
用 list-style-position: inside 实现“视觉缩进”
这是最轻量、兼容性最好的方案：把编号拉进内容区，再统一缩进整个 <li>。
-
list-style-position: inside让编号成为<li>盒子内的普通内容 - 此时对
<li>设置padding-left或text-indent才会同时影响编号和文字 - 注意：编号宽度不再占用左侧空白，可能影响多行文本对齐，需配合
padding-left调整整体左边界
ol {
list-style-position: inside;
}
ol li {
text-indent: 1.5em;
padding-left: 0;
}
用 ::marker 伪元素精准控制编号位置（现代方案）
Chrome 84+、Firefox 80+、Safari 15.4+ 支持 ::marker，可单独移动编号，保留 list-style-position: outside 的默认布局逻辑。
-
::marker只作用于编号本身，不影响文字内容 - 用
margin-right控制编号与文字间距，用margin-left拉动编号位置 - 若想“首行缩进文字但不动编号”，给
<li>设text-indent+padding-left补回编号空隙
ol li {
text-indent: 2em;
padding-left: 2em; /* 抵消编号原本占位，避免文字被遮挡 */
}
ol li::marker {
margin-right: 0.5em;
}
IE 或老浏览器兜底：用自定义计数器模拟 ol
IE 完全不支持 ::marker，list-style-position: inside 在部分安卓 WebView 中表现异常。这时建议放弃原生 <ol></ol>，改用 CSS counter + ::before。
- 用
counter-reset和counter-increment管理序号 -
<li>内部用::before插入编号，完全可控 - 编号和文字都属于同一盒模型，
text-indent生效，margin/padding随意调整
ol.custom {
counter-reset: item;
padding-left: 0;
}
ol.custom li {
counter-increment: item;
text-indent: 2em;
padding-left: 2em;
}
ol.custom li::before {
content: counters(item, ".") ". ";
display: inline-block;
width: 3em;
margin-left: -3em;
}
真正麻烦的不是怎么缩进，而是缩进后编号是否还对齐、换行是否错位、旧设备是否塌陷——优先测 list-style-position: inside，不行再切到 counter 方案；别在 ::marker 上卡兼容性，除非明确不支持 IE 且能接受 Safari 15.4– 的用户流失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
