如何在HTML中添加排序选择按钮且不移动原有按钮并同行显示

问题出在包裹select的<div id="sort-by-buttons">上——div默认是块级元素，会独占一整行，所以它会把后面的按钮挤到下一行。下面给你三种简单的解决方式：

方法1：把包裹select的div改成行内块元素 #

给这个div添加display: inline-block样式，让它不再独占一行，就能和后面的按钮排在同一行：

<div id="buttons">
  <div id="sort-by-buttons" style="display: inline-block;">
    <select name="sort-by" id="sort-by">
      <option value="all">All</option>
      <option value="name">Name</option>
      <option value="price">Price</option>
    </select>
  </div>
  <button class="button-value" onclick="filterProduct('all')">All</button>
  <button class="button-value" onclick="filterProduct('jacket')">Jacket</button>
</div>

方法2：直接去掉包裹select的div #

如果这个div没有额外的样式需求，完全可以删掉，让select直接作为#buttons的子元素——select本身是行内元素，会自动和按钮同行显示：

<div id="buttons">
  <select name="sort-by" id="sort-by">
    <option value="all">All</option>
    <option value="name">Name</option>
    <option value="price">Price</option>
  </select>
  <button class="button-value" onclick="filterProduct('all')">All</button>
  <button class="button-value" onclick="filterProduct('jacket')">Jacket</button>
</div>

方法3：用Flex布局实现更灵活的排列 #

给#buttons容器设置Flex布局，不仅能让元素同行，还能轻松控制垂直对齐和间距，视觉效果更协调：

<div id="buttons" style="display: flex; align-items: center; gap: 8px;">
  <div id="sort-by-buttons">
    <select name="sort-by" id="sort-by">
      <option value="all">All</option>
      <option value="name">Name</option>
      <option value="price">Price</option>
    </select>
  </div>
  <button class="button-value" onclick="filterProduct('all')">All</button>
  <button class="button-value" onclick="filterProduct('jacket')">Jacket</button>
</div>

其中align-items: center能让select和按钮垂直居中对齐，gap: 8px用来设置元素之间的间距，数值可以根据你的需求调整。

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