如何让 HTML 表单中的输入框垂直位于标签下方？-html教程-PHP中文网

如何让 HTML 表单中的输入框垂直位于标签下方？

通过将设置为 display: block 并合理添加外边距，可轻松实现标签在上、输入框在下的垂直布局，无需浮动或 Flexbox 等复杂方案。

通过将 `` 设置为 `display: block` 并合理添加外边距，可轻松实现标签在上、输入框在下的垂直布局，无需浮动或 flexbox 等复杂方案。

在默认文档流中，<label></label> 和 <input> 均为内联级元素（inline），会并排显示在同一行。要让输入框严格位于标签正下方，核心思路是打破内联流——最简洁、语义正确且兼容性极佳的方式，就是将 <label></label> 设为块级元素。

✅ 推荐解决方案：`display: block` + 垂直间距

label {
  display: block;      /* 强制独占一行 */
  margin-bottom: 0.75em; /* 在标签下方留出清晰间距，提升可读性 */
  font-weight: bold;
  text-align: left;    /* 可选：保持左对齐，与 input 一致 */
}

/* 可选：统一容器居中，但保留表单元素自身对齐逻辑 */
.container {
  max-width: 500px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center;
}

input, button {
  display: block;      /* 同样设为 block，确保它们也独占一行 */
  margin: 0.5em auto;  /* 水平居中 + 垂直间隔 */
  width: 100%;
  max-width: 300px;
}

对应 HTML 结构（已修正原始代码中的闭合错误和语义问题）：

<div class="container">
  <h2>Round OFF Calculator</h2>
  <label for="dig">INPUT THE NUMBER</label>
  <input type="number" id="dig" placeholder="Enter a value"><button onclick="roundAndDisplay()">Round Off</button>
</div>

⚠️ 注意事项：

Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

务必为 <input> 添加 id="dig"，否则 for="dig" 将失效，失去标签点击聚焦的可访问性优势；

原 CSS 中 bottom: 100& 是无效写法（应为 100% 且仅对定位元素生效），此处完全不需要定位属性；

<button onclick="Math.round"></button> 不会执行四舍五入——Math.round 是函数，需调用（如 onclick="roundAndDisplay()"）并配合 JS 实现逻辑；

* { margin: 0%; padding: 0% } 中的 % 单位不适用于 margin/padding（应为 0 或 0px/0rem），建议改用 * { margin: 0; padding: 0; } 或更优的现代重置（如 all: unset 配合显式设置）。