input内文字右对齐用text-align:right；整行input右对齐需父容器flex或text-align:right；数字框还需等宽字体与字符校验。
input 内容右对齐用 text-align: right
直接控制输入框内文字对齐，不是标签或整个 input 元素的位置——这是最常混淆的点。text-align 作用于 input 元素内部文本流，只影响用户输入内容的显示位置。
常见错误是试图用 float: right 或 margin-left: auto 让 input 整体右移，结果导致布局错乱或响应式失效。
- 给
input加style="text-align: right;"即可生效（内联写法最快验证） - 若用外部 CSS，选择器需明确指向 input，例如
input[type="text"], input[type="number"] { text-align: right; } -
text-align: right对type="password"和type="search"同样有效，但对type="checkbox"或type="radio"无效（它们不渲染文本） - 注意：iOS Safari 在某些字体设置下可能轻微偏移，加
line-height: normal;可缓解
label 右对齐 + input 左对齐的组合写法
当需要“标签右对齐、输入框左对齐”形成整齐竖线时，text-align 只负责 input 内容，标签对齐得另设。
关键不是让两者“互相靠拢”，而是各自在容器中锚定位置：label 靠右，input 靠左，中间留白自然分隔。
- 给
label设display: inline-block; width: 120px; text-align: right; - 给
input设display: inline-block; width: 200px; text-align: left;（或保持默认 left） - 包裹它们的父
div不要设text-align，否则会继承干扰 input 内容对齐 - 若用 Flex 布局，
label加margin-left: auto实现右推，比固定 width 更适应长文本
整行 input 在表单中右对齐（非内容）
如果目标是把整个 input 元素（连同它的边框、占位符）放在表单右侧，而不是里面文字右对齐，那就和 text-align 无关了。
此时操作对象是 input 的块级定位行为，不是文本流。
- 最简方式：
input外层套div，设text-align: right;—— 这会让所有 inline/inline-block 子元素右对齐 - 更可控方式：用 Flex，父容器
display: flex; justify-content: flex-end; - 避免用
float: right，它会脱离文档流，后续元素可能上浮覆盖 - 若 input 是
type="submit"等按钮类控件，还要额外重置appearance和border，否则浏览器默认样式可能破坏对齐
数字输入框右对齐的特殊注意事项
数字型 input（如金额、序号）右对齐不只是美观问题，还涉及可读性与小数点对齐逻辑。单纯 text-align: right 不够稳健。
尤其在动态宽度或中英文混排场景下，空格、全角符号、负号宽度不一致，会导致视觉错位。
- 强制等宽字体：
font-family: 'SFMono-Regular', Consolas, monospace; - 过滤非法字符（如中文减号 U+2212），用 JS 监听
input事件校验 - 对
type="number"，Chrome 默认不支持text-align在某些版本中失效，必须加!important或改用type="text"+ pattern 校验 - 服务端接收前仍需 trim 和类型转换，不能依赖前端对齐样式保证数据格式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
