使用label包裹input时，能否将标签文本置于输入框上方？

当然可以实现，不用拆分label和input的包裹结构，只需要简单的CSS就能让标签文本显示在输入框上方，以下是两种常用方案：

方案一：块级元素布局 #

利用display: block让label成为块级容器，内部文本和input自然换行，再通过样式调整间距：

<label>
  Label Text:
  <input type="text">
</label>

label {
  display: block;
  margin-bottom: 12px; /* 控制不同输入项之间的间距 */
}

input {
  width: 100%; /* 让输入框占满容器宽度 */
  box-sizing: border-box;
  padding: 8px;
  margin-top: 4px; /* 拉开标签和输入框的距离 */
}

方案二：Flex垂直布局 #

用Flex布局更灵活地控制内部元素的排列和间距：

label {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 直接设置标签与输入框的间距 */
  margin-bottom: 12px;
}

input {
  padding: 8px;
}

这两种方案都保留了label包裹input的语义化结构，同时实现了标签在上、输入框在下的视觉效果，完全满足需求。

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