用 display: flex 是让两个 input 并排显示最稳妥的方式，需包裹在容器中设 flex + gap，避免直接对 input 设 flex 或使用 float/inline-block 等旧方案。
用 display: flex 让两个 <input> 并排显示最稳
浏览器默认把 <input> 当成行内元素，但实际是替换元素，行为接近 <span></span>，又不完全一样——直接加 display: inline 或 inline-block 容易因换行符、空格或默认 vertical-align 导致错位。用 flex 是目前最可控的方式。
实操建议：
- 把两个
<input>包进一个容器（比如<div>），给容器加 <code>display: flex - 加
gap: 8px控制间距，比用margin更干净（不会影响外边距塌陷或父容器尺寸计算） - 避免只对
<input>单独设flex，容易受表单默认样式干扰（比如 Chrome 会给type="number"加 spin button，挤占宽度） - 如果输入框需要等宽，给每个加
flex: 1；要固定宽，就用width+flex-shrink: 0
<div style="display: flex; gap: 8px;"> <input type="text" placeholder="姓名"> <input type="text" placeholder="电话"> </div>
为什么不用 float 或 inline-block
老方案看似简单，但实际掉坑概率高：
-
float会脱离文档流，父容器高度塌陷，必须额外清浮（overflow: hidden或伪元素），在现代布局里纯属添麻烦 -
inline-block会把 HTML 换行符和空格渲染成空白字符，导致两个输入框之间多出约 4px 间隙，删空格或设font-size: 0又容易影响内部文字 - 两者都不支持响应式收缩（比如小屏下自动堆叠），而
flex配合@media一行就切布局
遇到 width 不生效？检查这几个地方
常见现象：明明写了 width: 200px，输入框还是撑满或缩太小。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设宽度，
flex下子项的width默认被flex-basis覆盖，优先用flex: 0 0 200px（不伸缩、不收缩、基准宽 200px） -
box-sizing是默认的content-box，padding和border会额外加宽，统一设成border-box更可预期 - 某些 UI 库（如 Bootstrap）会给
<input>设width: 100%，CSS 优先级不够时会被覆盖，加!important是信号——该检查样式来源了
移动端适配：小屏下自动换行别硬扛
并排在手机上根本放不下，强行保持 flex 会导致横向滚动或内容截断。
- 用媒体查询在宽度小于 480px 时改回垂直排列：
@media (max-width: 480px) { .input-group { flex-direction: column; } } - 别依赖 JS 动态判断宽度，CSS 媒体查询更轻量、触发更及时
- 如果用的是框架（如 Tailwind），直接写
flex flex-col md:flex-row，比手写 media 更稳妥
box-sizing: border-box 和 gap 的兼容性（IE 不支持，但如果你还在支持 IE，那整个问题都得换思路）。另外，别在 <form></form> 直接设 display: flex——有些浏览器对表单根元素的 flex 渲染有隐式限制，套一层 <div> 更省心。</div>
