css 将选择按钮添加到HTML而不移动其他元素

ix0qys7i 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(166)

我已经创建了一个包含多个按钮的HTML文档。我已经将这些按钮添加到名为“buttons”的DIV ID中。现在我想向HTML页面添加一个排序按钮。这个排序按钮应该与其他按钮在同一行上。为此，我已经在“buttons”中创建了一个新的DIV ID。此代码将排序按钮显示在其他按钮上方。不是内联的。
我想显示排序按钮与其他元素内联。但是，其他按钮不应该移动。我该怎么做呢？
代码的一个例子：

<div id="buttons">
  <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>

css

来源：https://stackoverflow.com/questions/75618320/add-select-buttons-to-html-without-moving-other-elements

2条答案

按热度按时间

af7jpaap1#

此问题有多种解决方案：

溶液1

- 删除容器div #sort-by-buttons。**

<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>

如果解决方案1不可行，因为您出于某种原因需要#sort-by-buttons，您可以查看以下两个解决方案：*

溶液2

- 将display: flex添加到容器div #buttons中。**

x一个一个一个一个x一个一个二个x

溶液3

- 制造#sort-by-buttonsinline-block.**

一个三个三个一个

赞(0）回复(0）举报 2023-03-05

qnzebej02#

设置div和按钮的样式：

<div id="sort-by-buttons" style="display:inline;">
  <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')" style="display:inline;">All</button>
<button class="button-value" onclick="filterProduct('jacket')" style="display:inline;">Jacket</button>

赞(0）回复(0）举报 2023-03-05

我来回答

css 将选择按钮添加到HTML而不移动其他元素

2条答案

溶液1

溶液2

溶液3

相关问题

热门标签

最新问答