直接设 width: 100% 对 无效，因其宽度由内容驱动且受默认缩进和序号定位影响；可靠解法是用 CSS 计数器配合 display: table 实现序号列自适应宽度。
直接设 width: 100% 为什么没用
给 <ol></ol> 加 width: 100% 几乎总失效——因为 <ol></ol> 默认是块级元素，但它的宽度行为由内容驱动，不是由父容器“继承”而来；更关键的是，浏览器对列表项的缩进（padding-inline-start）和序号定位（list-style-position）有隐式规则，强行设宽会破坏换行对齐，尤其在小屏下多行文本常被序号压住或错位。
padding-inline-start: 0 后序号被裁切怎么办
清掉默认缩进看似简单，但会导致序号（如 “1.”、“100.”）紧贴左边缘，超长序号直接溢出容器，屏幕阅读器也可能误读。这不是样式问题，而是语义布局断裂：
- 不推荐用
text-indent模拟缩进——它只影响第一行，多行文本会悬空 - 避免
list-style-position: inside——序号进入内容区，换行后文字顶到序号后面，可访问性差 - 真正可靠的解法是剥离原生序号渲染逻辑，用 CSS 计数器 + 表格布局撑开序号列
用 counter + display: table 实现真自适应
这个方案让序号列宽度完全由内容决定（“1.” 占窄，“99999.” 自动撑宽），且不改 HTML 结构、保留语义、兼容屏幕阅读器：
.custom-ol {
padding-inline-start: 0;
list-style: none;
counter-reset: custom-counter;
}
.custom-ol li {
display: table-row;
counter-increment: custom-counter;
}
.custom-ol li::before {
content: counter(custom-counter) '.';
display: table-cell;
text-align: end;
padding-inline-end: 4px;
width: 1px; /* 关键：触发表格列最小内容宽 */
}要点：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
-
width: 1px不是固定像素，而是强制浏览器按“内容最小宽度”计算列宽 -
display: table-cell确保多行文本始终与序号右对齐，不漂移 - 若需从特定数字开始，加
counter-set: custom-counter 99998即可
小屏下别硬塞所有列，优先保可读性
当列表项文字本身很长（比如含 URL 或长描述），再强求序号对齐反而让内容挤成一团。此时应配合响应式断点处理：
- 在
max-width: 480px下，把.custom-ol li改为display: block，序号用::before内联显示，取消表格布局 - 避免给
li设min-width——它在table-row下会被忽略，徒增调试负担 - 真正难的是长序号 + 长内容共存时的换行控制，
word-break: break-word要加在li上，而不是序号伪元素里
序号宽度自适应不是靠“调 padding”或“猜 margin”，而是把序号当成独立列来管理——表格布局那行 width: 1px 看似取巧，实则是利用了浏览器对 table-cell 的最小内容宽计算机制，这点容易被忽略，但恰恰是跨设备稳定对齐的核心。
