CSS如何实现表单内三个input输入框在同一行对齐布局

当前错位效果参考：

你当前代码出现错位的核心原因：

• 用float:right做并排布局时，写在前面的浮动元素会优先靠向最右侧，直接导致后两个输入框排列顺序颠倒，同时浮动元素脱离文档流，很容易引发父容器高度塌陷、对齐偏移问题
• Bootstrap自带的form-control类默认是块级元素，原生规则就是独占一行，只改宽度不改布局模式没法实现并排效果。

推荐方案：Flex布局实现（无浮动兼容问题，适配性好） #

你已经在项目中引入Bootstrap，不需要额外写自定义CSS，直接用Bootstrap内置的Flex类即可实现，修改后的代码如下：

<a href="#" className="list-group-item list-group-item-action list-group-item-primary">
  <form className="d-flex gap-2 align-items-center">
    <input
      placeholder='input 1'
      className="form-control" 
      onKeyDown={(e) => addScore(e)}
      style={{width: '50%'}}
    />
    <input
      placeholder='input 2'
      className="form-control" 
      style={{width:'20%'}}
    />
    <input
      placeholder='input 3'
      className="form-control" 
      style={{width:'20%'}}
    />
  </form>
</a>

关键修改点：

• 给<form>标签添加d-flex类，将表单转为弹性布局容器，内部输入框会默认按书写顺序在同一行排列，不会出现顺序颠倒问题
• 添加gap-2类设置输入框之间的统一间距，避免输入框边缘贴死
• 添加align-items:center实现三个输入框垂直方向居中对齐，不会出现高低错位
• 删除后两个输入框上的float:'right'属性，浮动是老旧布局方案，在Flex场景下会直接破坏正常布局逻辑

自定义CSS实现方案 #

如果你不想用Bootstrap内置类，也可以通过自定义CSS实现，首先给form加自定义类名，同时删除三个输入框上所有float相关的内联样式：

<form className="inline-input-form">
  <!-- 三个input保持原有书写顺序和宽度设置即可 -->
</form>

然后编写对应CSS规则：

.inline-input-form {
  display: flex;
  gap: 10px; /* 可自行调整输入框之间的间距 */
  align-items: center;
}

补充注意：HTML标准中不允许<a>标签嵌套<form>这类块级交互元素，可能引发点击事件、表单提交的异常问题，建议将外层a标签替换为div或者button元素，不影响本次布局效果。

内容的提问来源于stack exchange，提问作者Nathan