如何用Flexbox将标签放置在关联表单字段旁

我想用Flexbox把标签放在对应的表单元素旁边，试了好几种方法还是没掌握Flexbox的用法，想学习具体实现方式，标签样式参考“标签位于输入框旁”的效果。请问需要给标签单独创建类并设置额外Flexbox属性，还是可以直接在boxes类里完成标签定位？

CSS #

.body {
  display: flex;
  justify-content: center;
  font-family: 'Padauk', sans-serif;
}

#heading {
  color: rgba(130, 195, 236, 1);
}

#boxes {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 30vh;
  align-items: center;
  gap: 30px;
}

#boxes>*:nth-child(4) {
  margin-top: 1vh;
}

#boxes>*:nth-child(5) {
  margin-top: -1vh;
}

.input {
  background-color: rgba(152, 187, 209, 0.386);
  border: 1px solid;
  border-radius: 5px;
  border-color: rgba(130, 195, 236, 1);
}

.box {
  width: 31vh;
  height: 5vh;
  text-align: center;
}

#output-box {
  border: 1px solid;
  border-radius: 30px;
  border-color: rgb(10, 126, 179);
  background-color: rgba(64, 143, 193, 0.453);
  color: rgba(29, 2, 54, 0.311);
}

::placeholder {
  color: rgba(0, 0, 0, 0.232);
}

#button {
  border: 1px solid;
  border-radius: 5px;
  background-color: rgba(152, 187, 209, 0.386);
  border-color: rgba(130, 195, 236, 1);
  color: rgba(52, 160, 228, 0.588);
  box-shadow: 0 0 10px rgba(130, 195, 236, 1);
  cursor: pointer;
}

HTML #

<div id="boxes">
  <h1 id="heading"> Taximeter</h1>
  <input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1" class="box input" type="number">

  <input min="0" max="4" oninput="this.value = Math.abs(this.value)" min="0" placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">

  <output class="box" id="output-box"></output>

  <button onclick="calci()" id="button"> calculate!</button>
</div>

<div class="labels">
  <label class="labels" id="km" for="input-box1">km</label>
  <label class="labels" id="personen" for="input-box2"> Passengers </label>
  <label class="labels" id="Preis" for="output-box">Price</label>
</div>

不需要单独给标签创建复杂类，只要调整HTML结构，把每个表单元素和对应标签放在同一个Flex容器里，再配合简单的CSS设置就能实现需求：

1. 调整HTML结构 #

把每个输入框/输出框和对应的标签包裹在一个.input-group容器中，确保标签和元素一一对应：

<div id="boxes">
  <h1 id="heading"> Taximeter</h1>
  <!-- 第一个输入框+标签 -->
  <div class="input-group">
    <input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1" class="box input" type="number">
    <label id="km" for="input-box1">km</label>
  </div>

  <!-- 第二个输入框+标签 -->
  <div class="input-group">
    <input min="0" max="4" oninput="this.value = Math.abs(this.value)" placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">
    <label id="personen" for="input-box2">Passengers</label>
  </div>

  <!-- 输出框+标签 -->
  <div class="input-group">
    <output class="box" id="output-box"></output>
    <label id="Preis" for="output-box">Price</label>
  </div>

  <button onclick="calci()" id="button"> calculate!</button>
</div>

2. 修改CSS样式 #

添加.input-group的Flex布局设置，同时调整#boxes的内边距（原30vh过大）：

.body {
  display: flex;
  justify-content: center;
  font-family: 'Padauk', sans-serif;
  min-height: 100vh;
  align-items: center; /* 让表单垂直居中 */
  margin: 0;
}

#heading {
  color: rgba(130, 195, 236, 1);
}

#boxes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 2rem; /* 替换原30vh的大 padding，更合理 */
}

/* 新增：控制元素和标签的并排布局 */
.input-group {
  display: flex;
  align-items: center;
  gap: 10px; /* 元素和标签之间的间距 */
}

.input {
  background-color: rgba(152, 187, 209, 0.386);
  border: 1px solid;
  border-radius: 5px;
  border-color: rgba(130, 195, 236, 1);
}

.box {
  width: 31vh;
  height: 5vh;
  text-align: center;
}

#output-box {
  border: 1px solid;
  border-radius: 30px;
  border-color: rgb(10, 126, 179);
  background-color: rgba(64, 143, 193, 0.453);
  color: rgba(29, 2, 54, 0.311);
}

::placeholder {
  color: rgba(0, 0, 0, 0.232);
}

#button {
  border: 1px solid;
  border-radius: 5px;
  background-color: rgba(152, 187, 209, 0.386);
  border-color: rgba(130, 195, 236, 1);
  color: rgba(52, 160, 228, 0.588);
  box-shadow: 0 0 10px rgba(130, 195, 236, 1);
  cursor: pointer;
}

/* 标签样式调整，匹配需求 */
.input-group label {
  color: rgba(130, 195, 236, 1);
  font-weight: 500;
}

说明 #

• 把元素和标签放在同一个Flex容器（.input-group）中，通过display: flex实现并排，align-items: center保证垂直对齐，gap控制间距，结构清晰易维护。
• 不需要单独给标签设置复杂的Flex属性，只需要在分组容器里统一控制即可，同时可以给标签添加简单样式匹配需求效果。

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