列表项宽度对不齐主因是盒模型理解偏差及内边距/边框参与宽度计算，应统一使用 box-sizing: border-box、重置列表默认间距、统一 display 类型并规范排版控制。
列表项宽度对不齐，通常不是因为“宽度设得不一样”，而是盒模型理解偏差 + 内边距/边框参与了宽度计算导致的视觉错位。关键在统一盒模型行为，而不是反复调像素。
用 box-sizing: border-box 统一盒模型
默认 box-sizing 是 content-box，此时 width 只算内容区，padding 和 border 会额外撑开总宽。比如两个 li 都设 width: 100px; padding: 10px;，实际占用宽度是 120px —— 看似一样，但若其中一个有 border、另一个没有，就立刻不对齐。
解决方法：全局重置（推荐写在 CSS 开头）：
* { box-sizing: border-box; }/* 或更稳妥地只作用于列表相关元素 */
ul, ol, li, a { box-sizing: border-box; }
检查 padding/margin 是否隐式不一致
浏览器对 ul、ol 默认有 margin（如 Chrome 是 16px），而 li 默认无 padding/margin。如果手动给部分 li 加了 padding-left，其他没加，或用了不同单位（em vs px），就会错位。
立即学习“前端免费学习笔记（深入）”；
建议做法：
- 显式重置列表容器的 margin/padding：
ul, ol { margin: 0; padding: 0; } - 所有列表项统一设置内边距：
li { padding: 8px 12px; }（避免只设单边） - 用
display: flex或display: grid布局时，确保子项不因 whitespace（换行符）产生间隙
文字内容长度差异大？用最小宽度 + 对齐控制
即使盒模型一致，纯文字列表项仍可能因内容长短导致视觉“不齐”——比如一个词和一句话并排显示。这不是宽度问题，是排版预期偏差。
可配合以下方式增强一致性：
- 设
min-width保证基础宽度下限（如min-width: 120px;） - 用
text-align: left/center统一对齐方式 - 对超长文本加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;保持高度与宽度稳定
检查是否混用了 display 类型
常见陷阱：部分 li 设了 display: inline-block，另一些是默认 display: list-item，或用了 float。它们的基线对齐、空白处理规则完全不同，极易造成错位。
统一方案：
- 横向排列优先用
display: flex（父级ul上设置） - 网格布局用
display: grid，配合grid-template-columns - 避免 inline-block + HTML 换行空格，或用注释消除空白：
<li></li><!-- --><li></li>
