如何使form内的label标签显示在同一行且结果框位于其下方？

核心思路 #

把每个「Label+输入控件」的组合封装成独立容器，通过CSS让这些容器横向排列；同时把结果展示框设置为块级元素，强制它占据整行，自然就会落在所有Label下方。

完整代码示例 #

HTML结构

<form>
  <!-- 表单项组：每个组包含label和对应的输入 -->
  <div class="form-item">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-item">
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">
  </div>
  <div class="form-item">
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
  </div>

  <!-- 结果展示框 -->
  <div class="result-box">
    <label>结果：</label>
    <textarea id="result" readonly></textarea>
  </div>
</form>

CSS样式

/* 让每个表单项组横向排列 */
.form-item {
  display: inline-block;
  margin-right: 20px;
  /* 让label和输入垂直居中对齐 */
  vertical-align: middle;
}

/* 给label设置固定宽度，排版更整齐（可选） */
.form-item label {
  display: inline-block;
  width: 60px;
  text-align: right;
  margin-right: 8px;
}

/* 强制结果框占满整行，位于所有表单项下方 */
.result-box {
  display: block;
  margin-top: 20px;
}

.result-box textarea {
  width: 400px;
  height: 100px;
}

关键细节说明 #

• inline-block 是让表单项横向排列的核心，它既保留块级元素的特性，又能像行内元素一样横向排布
• 给label设置固定宽度+右对齐，能让整个表单的排版更整齐（如果不需要可以去掉这部分）
• result-box 设置为display: block，不管前面的元素是什么布局，它都会独占一行，自动落到所有表单项下方

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