如何实现标签在上的三输入框同行排列且自动换行的布局？

你需要先调整HTML结构，将每组标签和输入框封装为独立单元，再配合flex布局属性实现需求，最终效果如下：
#

调整后HTML代码 #

<div class="dInput" v-if="activeStage == 3">
  <!-- 每组label+input用独立容器包裹 -->
  <div class="form-item">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="form-item">
    <label for="name2">Username*</label>
    <input type="text" id="name2">
  </div>
  <div class="form-item">
    <label for="name3">Username*</label>
    <input type="text" id="name3">
  </div>
  <!-- 超过3个会自动换行到下一行 -->
  <div class="form-item">
    <label for="name4">Username*</label>
    <input type="text" id="name4">
  </div>
</div>

调整后CSS代码 #

/*Stage 3 input group*/
.dInput{
  margin-top: 15px;
  /* 新增flex配置 */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 15px; /* 控制行间距，可按需调整 */
}

/* 新增表单项容器样式 */
.form-item {
  width: 31%; /* 3个总宽度93%，剩余7%为水平均匀间距 */
}

.form-item label {
  display: block;
  padding: 6px 0;
  color: #f8f9fa;
}

.form-item input {
  padding: 5px;
  width: 100%; /* 撑满容器宽度 */
  box-sizing: border-box; /* 避免内边距撑宽容器 */
  background-color: #495057;
  border-radius: 4px;
}

功能说明 #

• 每组标签和输入框作为独立flex单元排列，标签默认块级显示在输入框上方
• 一行固定放置3个输入框，水平间距通过space-between自动均匀分配
• 开启flex-wrap: wrap后，输入框数量超过3个时自动换行，新行依然保持3个的排列规则
• row-gap属性控制不同行之间的垂直间距，可根据需求调整数值

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