默认不并排因浏览器对reset/submit的border、padding、font-size渲染差异，父容器窄或文本长致折行，box-sizing不统一致width表现不同；需统一display、vertical-align、box-sizing及height等样式。
为什么 <input type="reset"> 和 <input type="submit"> 默认不并排？
默认情况下，这两个按钮都是 inline 元素，理论上会自然并排。但实际中常出现错位、换行或高度不一致，原因有三：
- 浏览器对
input[type="reset"]和input[type="submit"]的默认border、padding、font-size可能微有差异（尤其在旧版 IE 或 Safari 中） - 若父容器宽度不足，或按钮文本过长（如中文“重置” vs “提交”），
white-space: normal会触发折行 - 没统一
box-sizing：一个用了content-box，另一个被重置样式设为border-box，导致width: auto表现不一致
最直接的验证方式是打开开发者工具，对比两个按钮的 computed styles 中的 height、line-height、vertical-align 是否完全一致。
用 display: inline-block + 统一基线控制并排
这是兼容性最好、无需改 HTML 结构的方案：
- 给两个按钮都加
display: inline-block（避免float脱离文档流的风险） - 显式设置
vertical-align: middle（别依赖默认值，不同浏览器对input的默认vertical-align可能是baseline或middle） - 强制统一盒模型：
box-sizing: border-box - 设定相同
height和line-height（例如height: 36px; line-height: 36px），避免文字撑高
.form-buttons input[type="submit"],
.form-buttons input[type="reset"] {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
height: 36px;
line-height: 36px;
padding: 0 16px;
font-size: 14px;
border: 1px solid #ccc;
background: #fff;
}注意：不要只给其中一个设 vertical-align，必须两者同时设，否则基线仍不对齐。
用 Flex 布局更可靠，但要注意父容器约束
如果父容器允许改 display（比如你控制着 <div class="form-buttons">），Flex 是更现代、更可控的方式：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器设
display: flex+gap: 8px（比手动margin-right更干净） - 两个按钮保持默认
display: inline或inline-block即可，Flex 会自动拉平高度 - 加
align-items: center确保垂直居中
.form-buttons {
display: flex;
gap: 8px;
align-items: center;
}⚠️ 容易踩的坑：若父容器是 <td> 或 <p> 这类有默认样式限制的元素，直接设 display: flex 可能破坏原有布局流；此时优先选上一节的 inline-block 方案。
按钮宽度不一致？检查 width 和 white-space
并排后一个宽一个窄，常见于：
立即学习“前端免费学习笔记（深入）”；
- 一个按钮写了
width: 100px，另一个没写，导致后者按内容自适应（“重置”二字比“提交”略宽） - 按钮内文本被截断或换行：确保
white-space: nowrap，防止“重置”在小屏下折成两行 - 字体渲染差异：某些字体中“重”字比“提”字视觉更重，建议统一用
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
真正要解决对齐，核心不是调位置，而是让两个按钮在尺寸、基线、盒模型三个维度上完全一致。一旦某一项不一致，靠 margin-left 或 position: relative 硬推，只是掩盖问题，响应式或换字体时大概率崩。
