HTML中搜索栏与按钮无法横向排列问题求助

Water.css默认将表单元素设为块级，所以会自动纵向堆叠。用CSS Flexbox就能快速实现横向布局，步骤如下：

1. 套flex容器：把两个搜索表单和Add按钮放进一个<div>容器，给容器加display: flex开启弹性布局。
2. 调整对齐与间距：用align-items: center让元素垂直居中，gap: 1rem给元素间加合适间距，避免拥挤。
3. 适配小屏幕：加上flex-wrap: wrap，让窄屏时元素自动换行，不会溢出。
4. 限制输入框宽度：给表单输入框设max-width，防止过宽撑破布局。

修改后的代码示例：

<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
  <!-- 设备名称搜索表单 -->
  <form method="GET" action="">
    <label>设备名称：</label>
    <input type="text" name="device_name" placeholder="输入设备名" style="max-width: 200px;">
    <button type="submit">搜索</button>
  </form>

  <!-- 价格区间搜索表单 -->
  <form method="GET" action="">
    <label>价格区间：</label>
    <input type="number" name="min_price" placeholder="最低价" style="max-width: 100px;">
    <span>-</span>
    <input type="number" name="max_price" placeholder="最高价" style="max-width: 100px;">
    <button type="submit">筛选</button>
  </form>

  <!-- Add Equipment按钮 -->
  <a href="add_equipment.php"><button>Add Equipment</button></a>
</div>

如果想复用样式，也可以把flex容器的样式写在<style>里（不破坏Water.css无类的思路）：

<style>
  .horizontal-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
  }
  .horizontal-group input {
    max-width: 150px;
  }
</style>

<div class="horizontal-group">
  <!-- 表单和按钮放这里 -->
</div>

这样既保留Water.css原生样式，又实现了横向排列，代码简单易调整，适合新手修改。

内容的提问来源于stack exchange，提问作者ClaireFromIT