html表单默认块级显示，需用flex容器（如form-row）布局并排；ie9以下用inline-block加font-size:0和vertical-align:middle；避免float和white-space:nowrap。
HTML 表单默认是块级元素，直接写在一行会换行
表单（<form></form>）默认是 display: block，哪怕只有一行输入框，两个 <form></form> 并排写也会垂直堆叠。这不是 bug，是规范行为——表单语义上代表独立的提交上下文，浏览器不会自动内联它们。
常见错误现象：
写了两个 <form></form> 标签，中间没换行、没空格，但渲染出来还是上下排列；加了 float: left 或 display: inline-block 后，表单内部的 <input> 也错位或撑开高度。
- 真正要“放一行”的，往往不是两个完整表单，而是两个独立的输入操作（比如搜索框 + 登录按钮），此时应优先考虑：用一个
<form></form>包住多个控件，而非硬塞两个表单 - 如果业务逻辑确实要求两个分离的表单（例如左侧筛选 + 右侧导出），必须用 CSS 控制布局，且注意表单内部默认 margin 和 vertical-align 影响对齐
- 别依赖
white-space: nowrap强行压，它对块级元素无效，还可能破坏响应式
用 display: inline-flex 或 display: flex 最稳妥
Flex 是目前最可控的方式，能自然处理对齐、间距和换行问题，兼容性也足够（IE10+）。关键是把容器设为 flex，而不是直接改 <form></form> 的 display —— 否则会影响表单内部子元素流式布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给两个
<form></form>套一个<div class="form-row"> 容器 <li>对容器设置 <code>display: flex，再用gap控制间距（比margin更干净） - 加上
align-items: baseline或align-items: center解决输入框和按钮基线不齐的问题 - 避免对
<form></form>自身设width，让内容撑开更健壮；如需等宽，用flex: 1分配
示例：
<div class="form-row" style="display: flex; gap: 8px; align-items: center;"> <form><input type="text" placeholder="搜索"></form> <form><button type="submit">导出</button></form> </div>
遇到 IE9 及更老浏览器怎么办
IE9 不支持 flex，inline-block 是唯一可行方案，但坑多：元素间空格会变成 4px 间隙，vertical-align 默认是 baseline 导致按钮下沉，父容器 font-size: 0 又可能影响内部文本。
bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
font-size: 0，再给每个<form></form>单独设回正常字号（如font-size: 14px） - 每个
<form></form>加display: inline-block; vertical-align: middle - 用
margin-left替代gap控制间距，第一个表单不加 - 务必测试
<input>和<button></button>在 IE9 下的实际高度是否一致，不一致就手动设height和line-height
为什么不用 float 了
float 会让父容器塌陷，需要额外清浮动（overflow: hidden 或伪元素），而且一旦某个表单内容变长，另一侧容易被顶下来——尤其在响应式场景下，宽度收缩时极易错行。
更隐蔽的问题：
-
float元素脱离文档流，position: relative子元素的定位参考系会变 - 与现代 CSS（如
grid、sticky）混用时行为不可预测 - 无障碍工具可能无法正确识别浮动区域的阅读顺序
除非维护十年以上的老系统，否则没必要碰 float 布局表单。
真正麻烦的不是怎么并排，而是并排之后两个表单的提交逻辑是否真该隔离——很多情况下，合并成一个 <form></form> 再用不同 name 区分字段，反而更简单、更可靠。
