如何将单行表单重排为两行布局以提升用户友好性

核心实现思路 #

通过Flex或Grid布局实现分栏排版，精准控制各字段位置：

• 第一行并列放置amount与note字段
• 第二行并列放置date字段与optionList选项列表
• 底部单独一行放置create和cancel按钮，居中对齐

完整代码示例 #

HTML结构 #

<!-- 表单容器 -->
<form class="transaction-form">
  <!-- 第一行：金额 + 备注 -->
  <div class="form-row">
    <div class="form-group">
      <label for="amount">金额</label>
      <input type="number" id="amount" name="amount">
    </div>
    <div class="form-group">
      <label for="note">备注</label>
      <input type="text" id="note" name="note">
    </div>
  </div>

  <!-- 第二行：日期 + 选项列表 -->
  <div class="form-row">
    <div class="form-group">
      <label for="date">日期</label>
      <input type="date" id="date" name="date">
    </div>
    <div class="form-group">
      <label>选项</label>
      <div class="option-list">
        <label><input type="radio" name="option" value="1"> 选项1</label>
        <label><input type="radio" name="option" value="2"> 选项2</label>
        <label><input type="radio" name="option" value="3"> 选项3</label>
      </div>
    </div>
  </div>

  <!-- 按钮组 -->
  <div class="form-actions">
    <button type="submit" class="btn create-btn">创建</button>
    <button type="button" class="btn cancel-btn">取消</button>
  </div>
</form>

CSS样式 #

/* 表单容器：控制整体宽度、间距和外观 */
.transaction-form {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #e0ddcf;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 行容器：用Flex实现同行列内元素均分宽度 */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* 表单组：控制每个字段的占比和内部布局 */
.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.option-list {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.option-list label {
  display: inline-block;
  margin-right: 15px;
  font-weight: normal;
}

/* 按钮组：居中对齐按钮 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.create-btn {
  background-color: #2ecc71;
  color: white;
}

.cancel-btn {
  background-color: #e74c3c;
  color: white;
}

关于之前display: grid无效的说明 #

如果想用Grid布局实现，只需将.form-row的样式替换为以下代码即可——之前无效是因为缺少明确的行列规则定义：

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

Flex和Grid两种方式效果一致，可根据个人习惯选择。

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