HTML中宽度不一致的本质是浏览器按字符宽度和空格规则渲染，本身不强制等宽；最可靠方案是用CSS Grid或Flex控制列宽，而非依赖字体或文本对齐。
HTML 中 <span></span> 宽度不一致导致 2 字和 3 字不对齐
本质不是“字数对齐”问题，而是浏览器默认按字符宽度（尤其是中文字体）和空格处理方式渲染，<span></span> 本身不强制等宽。常见于标签栏、状态 badge、表格内行内文本对齐场景。
- 中文等宽字体（如
SimSun、"Microsoft YaHei"）在多数系统下仍非真正等宽，全角字符之间存在微小字距差异 - 默认
white-space: normal会压缩连续空格，无法靠加空格“凑位数” - 使用
letter-spacing或word-spacing会影响所有字符，破坏可读性
用 text-align: justify + 伪元素撑开固定字符数容器
适用于已知最大字数（比如最多 3 字）、需严格左对齐且视觉上“列对齐”的情况，比如后台列表的状态列。
- 给父容器设
text-align: justify，再用::after插入足够多的不可见占位符（如 - 更稳妥的做法是统一用
inline-block+ 固定width，例如width: 60px（根据字体大小和字号测算） - 注意：
justify在单行文本中需配合text-align-last: justify才生效，但兼容性差（IE10+，Safari 15.4+ 才稳定）
最可靠方案：CSS Grid / Flex 实现列对齐
当多个 <span></span> 在同一逻辑行（如一个 <div> 内并排）时，放弃纯文本对齐，改用布局控制。
<ul>
<li>父容器设 <code>display: grid，列定义为 grid-template-columns: repeat(auto-fit, minmax(56px, 1fr))，每项占最小固定宽
display: flex + flex: 0 0 56px 强制每个子项等宽，再配 text-align: center 或 text-align: left
table，语义不符且响应式难处理；也别依赖 ch 单位（1ch = 当前字体中 '0' 的宽度），中文字体下该单位不稳定字体层面的硬约束：只用等宽中文字体 + font-feature-settings
极少数场景（如终端模拟、代码注释状态标记）要求像素级对齐，就得从字体源头控制。
立即学习“前端免费学习笔记（深入）”；
- 指定
font-family: "Sarasa Gothic SC", "Cascadia Code", monospace—— 这类开源字体明确将汉字映射为等宽字形 - 加上
font-feature-settings: "tnum";启用表格数字（tabular-nums），确保数字也对齐，避免混排时错位 - 注意：Windows 下
"SimSun"表面等宽，实际存在 hinting 差异；Mac 的"PingFang SC"默认非等宽，不能直接信
"成功"，另一个是 "处理中" —— 后者含 Unicode 全角字符，但浏览器渲染时还受 font-weight 和 line-height 微调影响。真要稳，就别拼“看起来一样”，老实用 layout 管住宽度。
