列表项对齐不齐主因是list-style-position、box-sizing、line-height三者未统一且重置范围错误；应设list-style-position: inside，ul/li共用box-sizing: border-box和无单位line-height: 1.4，并精准重置ul/ol而非全局。
直接结论：列表项对齐不齐，90%不是代码写错，而是list-style-position、box-sizing、line-height三者没统一，且重置范围错了。
为什么list-style-position: outside会让文本左边缘“看起来”参差不齐
浏览器默认用outside，意味着项目符号（圆点/数字）画在li内容框之外，不参与盒模型计算。Firefox 用padding-left预留空间，IE 用margin-left，但这个“预留空间”不随字体、行高变化而自适应——结果就是同一组li里，中文字+标点、英文+空格的基线和下降深度不同，视觉上文本起始位置就错开了。
- 别指望
text-align或margin-left硬拉齐，那是治标不治本 - 统一设
list-style-position: inside，让符号纳入内容框内，再用padding-left控制所有项的基准线 - 同时清掉
ul默认padding和li默认margin，否则叠加不可控
ul, li必须共用box-sizing: border-box和line-height
哪怕list-style-position设对了，如果li没声明box-sizing，后续加border或outline就会撑出容器；line-height若用1.5em这类相对单位，在不同字号li里继承后实际值不同，基线偏移直接破坏对齐。
- 写死
line-height: 1.4（无单位数值），不是1.4em或20px -
ul, li { box-sizing: border-box; }必须成对出现，不能只写li -
font-family也要统一，尤其混排中文字体时，不同系统渲染宽度浮动明显
IE7 下序号全为“1”？别碰height和float
这不是样式问题，是 IE7 渲染引擎的计数器状态丢失 bug：只要li显式设了height、float或display: inline-block，序号就静默失效。你检查 DOM 和 CSS 都正常，但数字就是不变。
- 绝对不要给
li设height，用line-height控制行高 - 避免
float: left横向排列，改用display: flex或display: inline-block+ 父级font-size: 0 - 若必须兼容 IE7，用 JS 补充计数：
document.querySelectorAll('ol li').forEach((el, i) => el.innerHTML = (i+1) + '. ' + el.innerHTML)，仅作兜底
重置别用* { margin: 0; padding: 0 }
这是最常见也最危险的操作——它会抹掉button、input等表单控件的原生间距，导致点击热区变小、可访问性下降。列表缩进不一致，根源在ul/ol，不是全局。
- 只针对列表重置：
ul, ol { margin: 0; padding: 0; list-style: none; } - 如需保留序号或圆点，去掉
list-style: none，但margin: 0和padding: 0必须保留 - 更稳妥的做法是引入
normalize.css，它不粗暴清零，而是对齐默认行为
真正麻烦的从来不是写几行 CSS，而是你改了padding-left却忘了同步box-sizing，或者调好了 Chrome 却没在 Firefox 里验证line-height继承效果——这些细节不连起来看，对齐问题永远在“差不多”和“差一点”之间反复横跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
