通过将 label 设置为 block 元素并合理使用 margin，可轻松实现标签在上、输入框在下的垂直布局，无需 flex 或 grid，兼容性好且语义清晰。
通过将 label 设置为 block 元素并合理使用 margin，可轻松实现标签在上、输入框在下的垂直布局，无需 flex 或 grid，兼容性好且语义清晰。
在 HTML 表单中，默认情况下 <label></label> 和 <input> 均为内联级元素（inline），会自然排列在同一行。若希望标签严格位于输入框正上方（即垂直堆叠），最简洁、语义正确且兼容性最佳的方案是：将 <label></label> 设为 display: block，并添加适当的上下间距。
以下是优化后的完整代码示例：
<meta charset="UTF-8"><title>Round OFF Calculator</title><style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 2rem auto;
padding: 1.5rem;
text-align: center;
}
h2 {
font-family: sans-serif;
font-weight: lighter;
margin-bottom: 1.5rem;
}
label {
display: block; /* 关键：强制换行，独占一行 */
margin-bottom: 0.75rem; /* 为下方 input 预留清晰间距 */
font-weight: bold;
font-size: 1.05rem;
}
input[type="number"] {
padding: 0.6rem 0.8rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
max-width: 240px;
margin-bottom: 1rem;
}
button {
background-color: lightskyblue;
color: #333;
border: none;
padding: 0.5rem 1.2rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: skyblue;
}
</style><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="alert('Round logic to be implemented')">Round Off</button>
</div>
✅ 关键要点说明：
-
label { display: block }是核心——它使标签脱离内联流，自动换行并占据整行宽度； -
for属性必须与对应input的id严格匹配（如本例中for="dig"↔id="dig"），以保障可访问性（键盘焦点、屏幕阅读器支持）； - 避免使用
bottom: 100&（原文 CSS 中存在语法错误，&应为%，且bottom对静态定位元素无效）； - 不推荐用
<br>或空<span></span>强制换行——破坏语义、增加冗余标记； - 如需进一步居中对齐或响应式适配，可在
.container上补充text-align: center或width控制，而非作用于单个表单控件。
? 进阶提示： 若后续需构建更复杂的表单结构（如带错误提示、图标前缀等），建议采用语义化 <fieldset></fieldset> + <legend></legend> 组合，或升级为 Flexbox 布局（flex-direction: column），但对本需求而言，display: block 已是最轻量、最可靠的标准解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
