Question 44611 in Html Question posted in
Some basic documentation can be found here.

Add select buttons to HTML without moving other elements

I have created a HTML document which contains multiple buttons. I have added these buttons inside a DIV id named ‘buttons’. I now want to add a sort by button to the HTML page. This sort button should be on the same line as the other buttons, To do this, I have created a new DIV id inside ‘buttons’. This code displays the sort button above the other buttons. Not inline.

I want to display the sort button inline with the rest of the elements. However, the other buttons should not move. How could I do this.

An example of the code:

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

2

Answers


  1. 0

    Style the div and buttons:

    <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>
    Login or Signup to reply.
  2. 0

    There are multiple solutions for this problem:

    Solution 1

    Remove the container 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>

    If Solution 1 is not possible, because you need #sort-by-buttons for some reason, you can have a look on the following two solutions:

    Solution 2

    Add display: flex to the container div #buttons.

    #buttons {
  display: flex;
}
    <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>

    Solution 3

    Make #sort-by-buttons inline-block.

    #sort-by-buttons {
  display: inline-block;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search