真正靠谱的方案是CSS计数器+display:table，将编号和内容拆为表格两列，用width:1px触发表格列自动撑宽、text-align:end实现右对齐，兼顾语义、可访问性与超长序号适配。
直接改 padding-inline-start 会出问题
很多人第一反应是设 ol { padding-inline-start: 1em; }，但这样干容易踩两个坑：数字被容器左边界裁掉（尤其在 overflow: hidden 的卡片里），或者多行文本绕到编号右边、视觉错位。更隐蔽的问题是——序号从 1. 变成 1000. 时，固定 1em 根本不够宽，编号会挤进内容区。
list-style-position: inside 看似简单，实际不推荐
它把编号拉进内容区域，避免溢出，但副作用明显：
- 长文本会环绕编号，第二行顶到编号正下方，破坏垂直对齐
- 屏幕阅读器可能误读为“编号+文本”连在一起，语义模糊
- 无法控制编号与文本之间的间距，
padding或margin在::marker上支持有限（Chrome 115+ 才稳定）
真正靠谱的方案：CSS 计数器 + display: table
这是目前唯一能兼顾语义、可访问性、响应式和超长序号的纯 CSS 方案。核心逻辑是把编号和内容拆成表格的两列，让编号列自动撑开宽度：
ol.custom-ol {
padding-inline-start: 0;
list-style: none;
counter-reset: custom-counter;
}
ol.custom-ol li {
display: table-row;
counter-increment: custom-counter;
}
ol.custom-ol li::before {
content: counter(custom-counter) '.';
display: table-cell;
text-align: end;
padding-inline-end: 4px;
width: 1px;
}
关键点：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
width: 1px不是设死宽度，而是触发表格列最小宽度计算机制，实际由内容撑开 -
text-align: end保证所有编号右对齐，视觉整齐 - 无需修改 HTML，兼容屏幕阅读器，也支持
start属性或counter-set调整起始值
如果只是临时微调，padding-inline-start 加安全值也能用
在序号位数确定（比如最多两位）、且容器足够宽的场景下，可以保守处理：
- 用
padding-inline-start: 2.5em（不是20px），确保缩进随字体缩放 - 加
min-width: min-content到ol上，防止极端窄屏下编号挤压 - 务必配合
list-style-position: outside（默认值），别动它
真正难的是动态序号宽度适配——这时候别硬调 padding，计数器 + 表格才是稳解。很多开发者卡在“为什么加了 padding 还是切编号”，其实问题不在数值，而在布局模型本身没切换过去。
