display: flex 是最稳的方案，应避免 float 和废弃属性；用 justify-content 控制水平对齐、gap 管理间距、align-items 实现垂直居中，并通过语义化结构（如 figure+figcaption）和合理嵌套解决基线与对齐干扰。

display: flex 是最稳的方案，别碰 float 或废弃的 align 属性。

用 flex 实现并排标签水平对齐

给父容器加 display: flex，所有子标签（如 <label>、<p>、<span>）会自动并排。关键在控制对齐方向和间距：

• justify-content 控制水平对齐：用 flex-start（左）、center（中）、space-between（两端）等
• gap 替代手动设 margin，更干净（IE 不支持，需 fallback）
• 若子元素高度不一，默认会顶部对齐；加 align-items: center 才能垂直居中
• 避免对 <h4> 或 <p> 单独设 display: inline-block——语义错乱且易受默认 margin 和 line-height 干扰

让并排的 <label> 和 <input> 右对齐标签

常见错误是直接给 <label> 加 text-align: right 却没控制宽度，结果标签文字挤到右边但整体没对齐。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须把每组 <label> + <input> 包进独立 <div>，否则 text-align 作用域错乱
• label 设固定宽（如 width: 120px）+ text-align: right + display: inline-block
• input 用 flex: 1 或固定宽，确保右侧留白一致
• 不用 float：清浮动麻烦，响应式下易塌陷，现代项目已淘汰

多图+标题并排时底部对齐失效？

用 <figure> + <figcaption> 并排时，常出现图片底边对齐、标题底边参差不齐——因为 <figcaption> 默认块级且无高度约束。

立即学习“前端免费学习笔记（深入）”；

• 父容器设 display: flex + align-items: flex-end，强制所有子项底部对齐
• 每个 <figure> 加 display: flex + flex-direction: column，再用 margin-top: auto 推标题到底部
• 避免只靠 vertical-align: bottom：它只对 inline/inline-block 有效，且依赖行高，不稳定
• figcaption 不要单独设 display: inline-block，否则会脱离语义结构

真正难的不是“怎么并排”，而是并排后各元素基线、行高、默认 margin 的隐性干扰——flex 容器能屏蔽大部分，但一旦嵌套或混用 display 类型，错位就立刻浮现。