label文字右对齐需先设display: inline-block并指定min-width，再加text-align: right和vertical-align: middle，同时保留for属性以保障可访问性。
label文字右对齐但保持语义和可访问性
直接给 label 加 text-align: right 没用——因为默认是 inline 元素，text-align 对它不生效。必须先让它能“撑开宽度”，再控制内部文字对齐。
核心做法是两步：设 display: inline-block 或 display: block，再加 text-align: right 和固定 width（否则右对齐没参照）。
-
label必须有明确宽度（如width: 120px），否则text-align: right表现不可控 - 推荐用
display: inline-block而非block，避免每行独占一行、破坏水平布局流 - 务必保留
for属性绑定input的id，否则点击文字无法聚焦输入框 - 若配合
input水平排列，记得给input也设vertical-align: middle，否则基线错位
为什么用 inline-block 而不是 float
float 在表单里容易引发父容器塌陷、换行异常、响应式断点错乱等问题，尤其当 label 文字长度不一或字体渲染差异时，右对齐会“漂移”。inline-block 天然受父容器 text-align 控制，更稳定。
-
float: left后必须手动清除（clear: both或伪元素），而inline-block无需 -
inline-block元素默认按基线（baseline）对齐，加vertical-align: middle即可与input对齐 - 移动端缩放时，
float布局更容易出现文字溢出或重叠，inline-block更可控
label 与 input 垂直对齐总偏高怎么办
这是最常被忽略的细节：Chrome/Firefox 下 label（即使设了 inline-block）和 input 默认基线不同，导致 label 看似“浮在上面”。不是 margin 或 padding 的问题，是 vertical-align 的默认值在作怪。
立即学习“前端免费学习笔记（深入）”；
- 统一给
label和input加vertical-align: middle - 避免在
label内嵌span或em等内联元素，它们会干扰 baseline 计算 - 如果用了
font-size或line-height差异大的字体，优先调vertical-align，而非硬调margin-top - 测试时打开开发者工具，选中两个元素看 computed 的
vertical-align和baseline位置
响应式场景下右对齐宽度怎么设
固定像素宽度（如 width: 140px）在小屏上会挤占输入框空间。不能简单用百分比，否则文字右对齐参照失效。
- 用
min-width替代width，例如min-width: 120px，让 label 在窄屏下可收缩但不小于最小可读宽度 - 搭配媒体查询，在
max-width: 480px时改用display: block+text-align: left，转为上下堆叠布局 - 若 label 文字长度差异大（如“姓名” vs “出生年月日”），建议按最长项测宽：用浏览器 DevTools 测量实际渲染宽度，再加 10–15px 余量
- 避免用
ch或em单位设 width——等宽字体才准，中文混排时偏差明显
真正难的不是让文字靠右，而是右对齐后还跟 input 严丝合缝、键盘用户能点中、缩放不崩、屏幕阅读器能读对。这些细节藏在 vertical-align、display 模式和 for/id 绑定里，漏一个，对齐就只是“看起来还行”。
