ol默认序号不靠左是因为list-style-position:outside且存在margin-left；可用inside使其进内容区，或重置margin/padding+outside+text-align:left精准控制；flex/grid中需为li显式设list-style。
ol列表序号为什么默认不靠左？
因为浏览器对 ol 的默认样式里，list-style-position 是 outside —— 序号画在内容框外侧，而文本本身有默认的左边距（margin-left），看起来就像序号“悬空”在左边空白处。这不是 bug，是规范行为，但确实不符合很多排版需求。
用 list-style-position: inside 让序号进内容区
这是最直接的解法：把序号拉进 li 的内容盒子里，自然就和文字左边缘对齐了。
ol {
list-style-position: inside;
}
注意：inside 模式下，序号会参与文本流，可能影响换行缩进；如果 li 内容很长，第二行文本会顶到序号下方，而不是像 outside 那样保持统一缩进。
更稳的方案：重置 margin + 强制 left 对齐
想彻底控制位置，推荐组合写法，避免 inside 带来的换行问题：
- 清除
ol默认的margin-left（通常是 40px） - 用
padding-left: 0防止内边距干扰 - 保留
list-style-position: outside，再用text-align: left确保序号自身左对齐
ol {
margin-left: 0;
padding-left: 0;
list-style-position: outside;
}
ol li {
text-align: left;
}
遇到 flex 或 grid 容器时序号消失？
如果 ol 被包在 display: flex 或 display: grid 的父容器里，序号可能不显示——因为 flex/grid 会把 li 当作弹性子项，忽略 list-style。
解决办法只有两个：
- 给
li显式设置list-style: decimal;（或你想要的类型） - 或者放弃语义化
ol/li，改用div+ 手动编号（仅当布局强依赖 flex/grid 且无法调整结构时）
真正容易被忽略的是：序号对齐不是纯视觉问题，它牵扯到语义、可访问性（屏幕阅读器依赖 ol 结构）、以及不同浏览器对 list-style-position 的细微渲染差异。别只盯着 CSS 调，先确认你的 HTML 结构没被意外包裹或重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
