Audio图标挤压内容导致输入框错位，如何实现所有输入框对齐排版？

提问内容 #

我的页面Audio图标显示异常，当前效果如下：

我需要实现所有输入框对齐的效果，即第一个输入框右移至与其余输入框处于同一水平位置，预期效果如下图：

目前不清楚该如何调整，实际表现为Audio图标莫名将整行内容向左挤压偏移。项目基于React开发。

修复方案 #

问题原因

当前布局没有给表单行的左侧区域预留统一宽度，Audio图标作为第一行的额外左侧元素挤占了输入框的可用空间，直接把输入框向左推偏移。其余没有图标的行左侧无元素占用空间，输入框起始位置更靠右，就出现了不对齐的情况。

具体实现方案

这里提供两种适配性高的实现方式，可直接在React项目中使用：

• 方案1：Flex 统一列宽实现
  给所有表单项的父容器加统一的flex布局规则，左侧预留固定宽度放图标/占位元素，右侧统一放输入框，示例代码如下：

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
/* 左侧区域统一宽度，不管有没有内容都占对应空间 */
.form-item-left {
  flex: 0 0 60px; /* 可根据实际图标大小调整数值，刚好放下Audio图标即可 */
}
.form-item-right {
  flex: 1;
}
.form-item-right input {
  width: 100%;
  box-sizing: border-box;
}

对应的JSX结构参考：

// 带Audio图标的表单项
<div className="form-item">
  <div className="form-item-left">
    {/* 此处放置Audio图标组件 */}
  </div>
  <div className="form-item-right">
    <input type="text" />
  </div>
</div>
// 其他不带图标的表单项
<div className="form-item">
  <div className="form-item-left"></div> {/* 空占位元素，占相同宽度 */}
  <div className="form-item-right">
    <input type="text" />
  </div>
</div>

• 方案2：Grid 布局更便捷
  如果表单为整列统一布局，直接给整个表单的父容器加Grid规则，不需要单独给每一行加类名，代码更简洁：

.form-container {
  display: grid;
  grid-template-columns: 60px 1fr; /* 第一列固定宽度放图标，第二列占剩余空间放输入框 */
  row-gap: 12px; /* 调整行间距 */
  align-items: center;
}

对应的JSX结构参考：

<div className="form-container">
  {/* 第一行：图标 + 输入框 */}
  <AudioIcon />
  <input type="text" />
  {/* 第二行：空占位 + 输入框 */}
  <div></div>
  <input type="text" />
  {/* 后续行都按此规则放置即可 */}
  <div></div>
  <input type="text" />
</div>

两种方案都可以实现所有输入框左对齐的效果，调整数值适配你的设计尺寸即可。

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