应使用 display: flex; flex-direction: column; align-items: flex-start 让 label 与 input 垂直堆叠且左对齐，避免 float、inline-block 或 table 布局带来的基线错位、响应式失效及语义退化问题。
用 flex 布局让两个标签垂直堆叠对齐
默认情况下，<label></label> 和 <input> 都是内联元素，容易挤在同一行，想“上下对齐”其实是希望它们垂直排列、左边缘对齐。最直接可靠的方式是把父容器设为 display: flex 并控制主轴方向。
关键不是“对齐两个标签”，而是让它们在同一个弹性容器里按列排列：
- 给包裹两者的
<div> 加 <code>display: flex+flex-direction: column - 确保
<label></label>和<input>都是该容器的直系子元素 - 若需整体居中，再加
align-items: flex-start（避免 label 文字被居中拉偏）
示例 CSS：
.form-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
为什么不用 float 或 inline-block 做上下对齐
有人尝试给 <label></label> 设 float: left 再清浮动，或设 display: inline-block + vertical-align: top，结果往往错位——因为这些方案本质是为“水平排列”设计的，强行用于垂直场景会引入额外高度计算、换行间隙、基线偏移等问题。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
典型表现：
-
<label></label>和<input>看似上下了，但左侧不对齐（inline-block默认按 baseline 对齐，<input>底边会比<label></label>文字底边高） - 小屏幕下突然换行，破坏结构
- 多个表单项之间
margin行为不可预测
table 布局也能上下对齐，但不推荐
用 display: table / table-row / table-cell 可模拟表格行为，让 <label></label> 占一整行、<input> 占下一行。它确实能强制垂直顺序，但代价明显：
- 语义失真：表单不是表格数据，
<table> 标签或 <code>display: table都会干扰可访问性（屏幕阅读器可能误读） - 响应式困难：
table-cell不响应width: 100%或媒体查询中的flex-direction切换 - 调试成本高：vertical-align 在 table-cell 中的行为受父级
table-layout影响，容易出现“明明设了 top 却没反应”的情况 - 统一设置
box-sizing: border-box - 给
<label></label>和<input>都加margin: 0和明确的font-size - 如需像素级对齐，可微调
<label></label>的margin-bottom或<input>的margin-top
注意 label 和 input 的默认 baseline 不一致
即使用了 flex-direction: column，如果后续要加图标、辅助文字或复选框，仍可能发现左侧边缘轻微错位。这是因为 <input type="text"> 默认有 border 和 padding，而 <label></label> 是纯文本，渲染基线不同。
解决办法很简单：
真正麻烦的从来不是“怎么排成上下”，而是上下之后左右边缘是否严丝合缝——这点常被忽略，直到上线后在 Safari 或旧版 Edge 里露出 1px 错位。
