应使用 display: flex; flex-direction: column; align-items: flex-start 让 label 与 input 垂直堆叠且左对齐，避免 float、inline-block 或 table 布局带来的基线错位、响应式失效及语义退化问题。

用 flex 布局让两个标签垂直堆叠对齐

默认情况下， 和 都是内联元素，容易挤在同一行，想“上下对齐”其实是希望它们垂直排列、左边缘对齐。最直接可靠的方式是把父容器设为 display: flex 并控制主轴方向。

关键不是“对齐两个标签”，而是让它们在同一个弹性容器里按列排列：

• 给包裹两者的
  加 display: flex + flex-direction: column
• 确保 和 都是该容器的直系子元素
• 若需整体居中，再加 align-items: flex-start（避免 label 文字被居中拉偏）

示例 CSS：

.form-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

为什么不用 float 或 inline-block 做上下对齐

有人尝试给 设 float: left 再清浮动，或设 display: inline-block + vertical-align: top，结果往往错位——因为这些方案本质是为“水平排列”设计的，强行用于垂直场景会引入额外高度计算、换行间隙、基线偏移等问题。

典型表现：


Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
• 和 看似上下了，但左侧不对齐（inline-block 默认按 baseline 对齐， 底边会比 文字底边高）
• 小屏幕下突然换行，破坏结构
• 多个表单项之间 margin 行为不可预测

table 布局也能上下对齐，但不推荐

用 display: table / table-row / table-cell 可模拟表格行为，让 占一整行、 占下一行。它确实能强制垂直顺序，但代价明显：

• 语义失真：表单不是表格数据， 标签或 display: table 都会干扰可访问性（屏幕阅读器可能误读）
  响应式困难：table-cell 不响应 width: 100% 或媒体查询中的 flex-direction 切换
  调试成本高：vertical-align 在 table-cell 中的行为受父级 table-layout 影响，容易出现“明明设了 top 却没反应”的情况

  注意 label 和 input 的默认 baseline 不一致

  即使用了 flex-direction: column，如果后续要加图标、辅助文字或复选框，仍可能发现左侧边缘轻微错位。这是因为 默认有 border 和 padding，而 是纯文本，渲染基线不同。

  解决办法很简单：

  • 统一设置 box-sizing: border-box
  • 给 和 都加 margin: 0 和明确的 font-size
  • 如需像素级对齐，可微调 的 margin-bottom 或 的 margin-top

  真正麻烦的从来不是“怎么排成上下”，而是上下之后左右边缘是否严丝合缝——这点常被忽略，直到上线后在 Safari 或旧版 Edge 里露出 1px 错位。