如何通过Flexbox实现HTML表单元素按指定多行布局？

要实现你需要的布局，只需调整Flexbox的排列方向，并给单选按钮组添加容器来控制它们的横向排列，具体修改如下：

1. 调整HTML结构 #

给两个单选按钮及对应标签套一个容器，同时移除原来的<br>标签（Flex布局无需依赖换行标签控制行）：

<br><br>
<h2>Tool</h2>
<div class="mytabs">
  <input type="radio" id="tabfree" name="mytabs" checked="checked">
  <label for="tabfree">Tab1</label>
  <div class="tab">
    <form action="/submitu">
      <div class="form-group">
        <p>Search By :</p>
        <!-- 新增单选按钮容器 -->
        <div class="radio-group">
          <input type="radio" id="user" name="srchusr" value="UserID" checked/>
          <label for="user">Option1</label>
          <input type="radio" id="group" name="srchusr" value="Group" />
          <label for="group">Option2</label>
        </div>
        <!-- 新增搜索文本容器 -->
        <div class="search-text-group">
          <label for="srchtxt">Search Text :</label>
          <input type="text" id="srchtxt" name="srchtxt" value="">
        </div>
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
  <input type="radio" id="tabsilver" name="mytabs">
  <label for="tabsilver">Tab2</label>
  <div class="tab">
    <p>Tab2 Data</p>
  </div>
</div>

2. 修改CSS样式 #

调整.form-group的Flex方向为垂直排列，同时给单选按钮组和搜索文本组设置横向排列：

body {
  background: #ccc;
  font-family: 'Garamond', sans-serif;
  color: #000080;
}

h2 {
  width: 25%;
  text-align: center;
  margin: auto;
  padding: 15px;
}

.mytabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 25px auto;
}

.mytabs input[type="radio"] {
  display: none
}

.mytabs label {
  padding: 25px;
  font-weight: bold;
  background: #e2e2e2;
  font-size: 20px;
}

.mytabs .tab {
  width: 100%;
  background: #fff;
  order: 1;
  display: none;
}

.mytabs input[type='radio']:checked+label+.tab {
  display: block;
}

.mytabs input[type="radio"]:checked+label {
  background: #fff;
}

.form-group {
  display: flex;
  flex-direction: column; /* 改为垂直排列子元素 */
  align-items: flex-start; /* 左对齐所有元素 */
  justify-content: center;
  margin: 40px 40px;
  font-size: 20px;
  gap: 15px; /* 统一控制每行元素的间距 */
}

/* 单选按钮组横向排列 */
.radio-group {
  display: flex;
  align-items: center;
  gap: 20px; /* 单选按钮之间的间距 */
}

/* 搜索文本与输入框横向排列 */
.search-text-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-group input[type="radio"] {
  display: block;
}

.form-group label {
  padding: 5px;
  margin: 0;
  font-weight: normal;
  background: #fff;
  font-size: 20px;
}

input[type=text] {
  padding: 6px 8px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid navy;
  border-radius: 4px;
}

input[type=submit] {
  padding: 8px 16px;
  cursor: pointer;
}

修改说明 #

• 将.form-group的flex-direction设为column，让所有子元素自动垂直分栏，实现每行一个区块的效果。
• 用.radio-group容器包裹单选按钮，设置横向Flex排列，保证两个选项在同一行显示。
• 用.search-text-group容器包裹搜索文本标签和输入框，让它们在同一行对齐。
• 用gap属性统一控制元素间距，替代原来的<br>和零散的margin，布局更整洁可控。

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