如何在单个div中垂直对齐label与input元素（无需新增div）

你用vertical-align没效果是因为这个属性是用来调整行内/行内块元素在同一行内的垂直位置，不是让元素换行堆叠。下面是几种不用新增div就能实现垂直堆叠的方法：

方法1：Flexbox布局（推荐） #

给id为name的div设置flex垂直排列，还能轻松控制每组元素的间距：

#name {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 可根据需求调整每组的间距 */
}

这种方法简洁灵活，label和input会自动上下堆叠，每组整体作为一个flex项。

方法2：设置元素为块级 #

把label和input都设为块级元素，它们会自动占满一行并换行：

#name label,
#name input {
  display: block;
}

/* 可选：给每组添加间距 */
#name input {
  margin-bottom: 12px;
}
/* 移除最后一个input的底部间距，避免多余空白 */
#name input:last-of-type {
  margin-bottom: 0;
}

如果希望label和input在同一组内保持同行（但整体两组上下堆叠），可以调整为：

#name label {
  display: inline-block;
  width: 100px; /* 固定宽度让对齐更整齐 */
}
#name input {
  display: inline-block;
}
/* 给每组的input后强制换行 */
#name input {
  display: block;
}

方法3：Grid布局 #

用单列网格实现垂直堆叠，同样能方便控制间距：

#name {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

Grid布局适合更复杂的排版场景，这里单列配置就能满足需求。

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