React JS网页输入框对齐问题咨询：不清楚对齐规范，已附布局参考

云上老周

2026-9-30

React 表单输入框对齐通用规则及实现方案

通用对齐规则

标签与输入框水平对齐：表单标签的基线和输入框内的文本基线保持一致，默认推荐右对齐标签，同组输入框左边缘严格对齐，标签和输入框的间距保持16px-24px适配不同屏幕尺寸
纵向间距对齐：同组表单项上下间距统一为20px，所有输入框高度保持一致，复选框、单选框和对应说明文本垂直居中对齐
响应式适配对齐：移动端自动切换为标签在上、输入框在下的纵向布局，所有输入框左右边缘和容器侧边距保持统一

React 项目实现方案

可以直接用CSS Flex布局实现，不需要额外引入重型UI库：

/* 表单容器样式 */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
/* 标签样式 */
.form-label {
  width: 120px;
  text-align: right;
  line-height: 32px; /* 和输入框高度保持一致 */
}
/* 输入框样式 */
.form-input {
  flex: 1;
  height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .form-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-label {
    width: 100%;
    text-align: left;
    line-height: 24px;
    margin-bottom: 4px;
  }
  .form-input {
    width: 100%;
  }
}

对应React组件示例：

function FormDemo() {
  return (
    <div style={{maxWidth: '600px', margin: '0 auto', padding: '20px'}}>
      <div className="form-group">
        <label className="form-label">用户名</label>
        <input type="text" className="form-input" placeholder="请输入用户名" />
      </div>
      <div className="form-group">
        <label className="form-label">邮箱</label>
        <input type="email" className="form-input" placeholder="请输入邮箱" />
      </div>
    </div>
  )
}