复选框与多行文本垂直对齐技巧

div {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; /* 可选：添加间距提升可读性 */
}

✅ 效果说明：

• display: flex 将
  转为弹性容器，使其子元素（<input> 和文本节点）成为 flex 项目；
• align-items: flex-start 确保所有项目沿交叉轴（此处为垂直方向）顶端对齐——即复选框的上边缘与文本第一行的上边缘对齐；
• gap 替代传统的 margin，安全地控制复选框与文本间的间距，避免外边距合并问题。

⚠️ 注意事项：

• 原生文本节点（如换行前的空格和换行符）在 flex 布局中会被当作一个匿名 flex 项目处理，但现代浏览器（Chrome/Firefox/Safari ≥ v14）均能正确渲染为左对齐、顶对齐的块级文本流；
• 若需兼容极旧浏览器（如 IE11），可改用 display: table-cell + vertical-align: top 组合，但会丧失 gap 和响应式灵活性，不推荐；
• 切勿使用 vertical-align: top 直接作用于 <input> —— 它仅对 inline 或 table-cell 元素生效，且在多行文本场景下行为不可靠。

? 进阶建议：
为提升可访问性与样式可控性，可额外添加：

div input[type="checkbox"] {
  margin: 0; /* 重置默认外边距 */
  flex-shrink: 0; /* 防止复选框被压缩 */
}

该方案简洁、语义合理、无需额外 DOM 节点或 JavaScript，是现代 CSS 布局解决此类对齐问题的标准实践。

好了，本文到此结束，带大家了解了《复选框与多行文本垂直对齐技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！