用 display: flex + justify-content: space-between 最稳，父容器需设明确宽度（如 width: 100%），两个 input 均加 flex: 1；避免 float 和冗余 margin，用 gap 控制间距，统一 padding、font 等样式防视觉偏差。
怎么让两个 <input type="text"> 在一行里左右对齐？
直接用 display: flex + justify-content: space-between 最稳，不用算 margin 或 float。新手最容易卡在父容器没设宽度、或者忘了给 input 设 flex: 1 导致右边框被挤出视口。
- 父容器必须有明确宽度（比如
width: 100%或固定值），否则space-between不生效 - 两个
<input>建议都加flex: 1，避免一个宽一个窄；如果想左边窄右边宽，就给左边设flex: 0 0 80px - 别用
float: left/right—— 容易塌陷，还得清浮点，纯属增加复杂度
input 左右对齐时文字靠左还是居中？
默认所有 <input type="text"> 文字都是靠左对齐的，这是浏览器原生行为。如果你发现文字“看起来”没对齐，大概率是 padding 不一致或字体大小不同导致的视觉偏差。
- 统一设置
padding-left: 12px（或你想要的值），别只设一边 - 检查是否误加了
text-align: center—— 这会让输入内容居中，但光标位置和用户预期不符，体验差 - 如果用了自定义字体，确保两边
font-family和font-size完全一致，否则等宽字符渲染宽度会微差
响应式下左右对齐崩了怎么办？
小屏幕一缩，两个文本框叠一起或换行，是因为 flex 默认不折行。要让它在窄屏自动垂直堆叠，得加 flex-wrap: wrap 和媒体查询控制。
- 给父容器加
flex-wrap: wrap，再用@media (max-width: 480px)把两个 input 的flex改成1 1 100% - 别依赖
min-width硬撑宽度 —— 移动端键盘弹出时 viewport 高度变化，容易触发意外滚动 - 测试时真机打开，别只看 Chrome DevTools 模拟器 —— iOS Safari 对
flex的解析偶尔有细微差异
为什么加了 margin 反而不对齐？
因为 margin 会参与 flex 主轴计算，尤其当父容器用 space-between 时，额外 margin 会破坏间距逻辑。常见错误是给右边 input 加 margin-right: 0，结果反而多出空白。
立即学习“前端免费学习笔记（深入）”；
- 所有对齐控制交给 flex 布局本身，input 内部用
padding调整内边距，外部别碰margin - 如果一定要留空隙，用
gap: 8px（父容器上），它专为 flex/grid 设计，不会干扰对齐逻辑 - 检查是否有全局样式污染，比如重置 CSS 里写了
input { margin: 0.33em 0; }—— 这种默认 margin 很隐蔽，建议初始化时写input { margin: 0; }
display: flex; justify-content: space-between; width: 100%;，两个 input 各加 flex: 1;。其它都是为绕过浏览器默认行为或适配边界情况加的防护措施。 
