浏览器列表对齐问题90%源于默认padding-left和list-style-position未重置，需统一设ol,ul{padding-left:0;margin:0}，禁用原生序号改用li::before生成，横向布局须设list-style:none并配合flex控制。
列表对齐问题，90% 出在浏览器默认 padding-left 和 list-style-position 上，不是你 CSS 写错了，而是没清干净。
ul/ol 默认缩进不统一，必须重置 padding-left 和 margin
Chrome 给 ol 设 padding-left: 40px，Firefox 是 2.5em，Safari 又不同——这导致同一段 HTML 在各浏览器里序号位置“漂移”。只写 text-align: left 完全无效，它不控制序号。
- 必须显式写：
ol, ul { padding-left: 0; margin: 0; } - 若要序号顶格、文字从固定位置开始，用组合：
text-indent: -1.5em; padding-left: 1.5em; - 别依赖
list-style-position: inside来“修正”缩进——它会让长文本第二行压到序号下方，尤其换字体或调line-height后更明显
自定义序号或符号时，优先用 li::before 而非 li::marker
li::marker 看似简洁，但 Safari ≤16.4 不支持，生产环境容易出兼容问题。彻底禁用原生序号后，用伪元素生成更可控。
- 先关掉默认：
ol { list-style: none; } - 再用计数器：
ol { counter-reset: item; } li::before { content: counter(item) ". "; counter-increment: item; } - 若需右对齐序号（如阿拉伯语或镜像布局），直接加 HTML 属性：
<ol dir="rtl"></ol>，比纯 CSStext-align: right更可靠且无障碍友好
横向排列 li 时，list-style 必须设为 none
给 ul 加 display: flex 后，原生圆点常错位、被裁切，甚至挤出容器。这不是 bug，是 list-style 和 flex 盒模型天然不兼容。
立即学习“前端免费学习笔记（深入）”；
- 统一清除：
ul { list-style: none; padding-left: 0; } - 横向项需明确宽度控制：
li { min-width: 120px; flex: 0 0 auto; }，否则长短内容会导致高度塌陷 - 若要保留视觉标记（如箭头、图标），用
li::before添加，避免依赖list-style-position: inside——它会让标记参与 flex 尺寸计算，引发flex-basis失效
语义化类批量控制不同列表的对齐行为
实际项目中不会只有一处列表。与其全局重置 ul，不如定义几个语义化类，改一处样式，所有带该类的列表立刻对齐。
-
class="list-reset"：完全去除缩进和外边距，适合导航菜单 -
class="list-inline"：横排显示，用display: inline-block+vertical-align: top -
class="list-tight"：保留符号但压缩行高，加line-height: 1.3和margin-block: 0.1em - 最容易被忽略的是
list-style-position: outside的默认行为——符号画在内容框外，即使清了padding，它仍可能“悬出”容器，需配合overflow: hidden或调整padding-inline-start微调
