如何在表单文本框块级排列时将右侧按钮与首个文本框顶部对齐

我们可以通过Flex布局拆分表单的左右区域实现需求，具体修改如下：

第一步：调整HTML结构 #

将表单内容拆分为左侧输入框容器、右侧操作区容器两部分：

<main>
  <img id="header" src="images/header.jpeg">
  <div>
    <form>
      <!-- 左侧输入框区域 -->
      <div class="left-col">
        <input type="text" placeholder="Restaurant Name" class="textbox"><br/>
        <input type="text" placeholder="Location" class="textbox">
      </div>
      <!-- 右侧按钮、单选框区域 -->
      <div class="right-col">
        <button type="submit" id="search_button">
          <i class="fa fa-search"></i>
        </button>
        <input type="radio" value="Best Match" name="search_terms">
        <label>Best Match</label>
        <input type="radio" value="Review Count" name="search_terms">
        <label>Review Count</label> <br/>
        <input type="radio" value="Rating" name="search_terms">
        <label>Rating</label>
        <input type="radio" value="Distance" name="search_terms">
        <label>Distance</label>
      </div>
    </form>
  </div>
</main>

第二步：新增CSS样式 #

在原有CSS基础上添加以下规则：

form {
  display: flex;
  /* 左右两列默认顶部对齐 */
  align-items: flex-start;
  gap: 12px;
}

.right-col {
  display: flex;
  flex-wrap: wrap;
  /* 调整单选和按钮的对齐和间距 */
  align-items: center;
  gap: 8px 12px;
  padding-top: 3px; /* 微调高度匹配左侧第一个输入框的顶部位置 */
}

#search_button {
  margin-left: 0; /* 移除原有的左外边距，用父容器的gap控制间距即可 */
}

修改后即可实现预期效果：左侧两个输入框上下堆叠，右侧的提交按钮、单选选项整体和第一个输入框顶部对齐，单选框自动换行排列。

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