默认不并排因浏览器对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 是更现代、更可控的方式：<ul>
<li>父容器设 <code>display: flex + gap: 8px（比手动 margin-right 更干净）
display: inline 或 inline-block 即可，Flex 会自动拉平高度 align-items: center 确保垂直居中 .form-buttons {
display: flex;
gap: 8px;
align-items: center;
}
⚠️ 容易踩的坑：若父容器是 <td> 或 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 这类有默认样式限制的元素，直接设 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 硬推，只是掩盖问题，响应式或换字体时大概率崩。
