如何将input输入框置于label标签下方？前端布局求助

要实现输入框在标签下方的布局，有几种简单直接的方法，无需复杂代码：

方法1：设置块级元素（快速生效） #

给label和input都添加display: block;样式，让每个元素独占一行，自动上下排列：

label, input {
  display: block;
  margin-bottom: 8px; /* 可选：增加元素间的留白，提升可读性 */
}

对应的基础HTML结构：

<label for="username">用户名</label>
<input type="text" id="username" name="username">

<label for="email">邮箱</label>
<input type="email" id="email" name="email">

方法2：用Flex布局（适合批量表单项） #

把每组label+input包裹在容器里，设置容器为垂直方向的Flex布局，方便统一控制间距：

<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</div>

<div class="form-group">
  <label for="email">邮箱</label>
  <input type="email" id="email" name="email">
</div>

.form-group {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  margin-bottom: 12px; /* 表单组之间的间距 */
}

.form-group input {
  margin-top: 4px; /* label与input之间的小间距 */
}

方法3：HTML换行标签（不推荐） #

虽然可以直接在label和input之间加<br>强制换行，但这种方式将样式混入结构，后期维护麻烦，不建议使用：

<label for="username">用户名</label><br>
<input type="text" id="username">

推荐使用方法1或2，符合前端开发的结构与样式分离规范，也更易维护。

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