anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
display: flex 是最稳的方案，应避免 float 和废弃属性；用 justify-content 控制水平对齐、gap 管理间距、align-items 实现垂直居中，并通过语义化结构（如 figure+figcaption）和合理嵌套解决基线与对齐干扰。
display: flex 是最稳的方案，别碰 float 或废弃的 align 属性。
用 flex 实现并排标签水平对齐
给父容器加 display: flex，所有子标签（如 <label></label>、<p></p>、<span></span>）会自动并排。关键在控制对齐方向和间距：
-
justify-content控制水平对齐：用flex-start（左）、center（中）、space-between（两端）等 -
gap替代手动设margin，更干净（IE 不支持，需 fallback） - 若子元素高度不一，默认会顶部对齐；加
align-items: center才能垂直居中 - 避免对
<h4></h4>或<p></p>单独设display: inline-block——语义错乱且易受默认margin和line-height干扰
让并排的 <label></label> 和 <input> 右对齐标签
常见错误是直接给 <label></label> 加 text-align: right 却没控制宽度，结果标签文字挤到右边但整体没对齐。
- 必须把每组
<label></label>+<input>包进独立<div>，否则 <code>text-align作用域错乱 -
label设固定宽（如width: 120px）+text-align: right+display: inline-block -
input用flex: 1或固定宽，确保右侧留白一致 - 不用
float：清浮动麻烦，响应式下易塌陷，现代项目已淘汰 - 父容器设
display: flex+align-items: flex-end，强制所有子项底部对齐 - 每个
<figure></figure>加display: flex+flex-direction: column，再用margin-top: auto推标题到底部 - 避免只靠
vertical-align: bottom：它只对inline/inline-block有效，且依赖行高，不稳定 -
figcaption不要单独设display: inline-block，否则会脱离语义结构
多图+标题并排时底部对齐失效？
用 <figure></figure> + <figcaption></figcaption> 并排时，常出现图片底边对齐、标题底边参差不齐——因为 <figcaption></figcaption> 默认块级且无高度约束。
真正难的不是“怎么并排”，而是并排后各元素基线、行高、默认 margin 的隐性干扰——flex 容器能屏蔽大部分，但一旦嵌套或混用 display 类型，错位就立刻浮现。
