having mutiple select in ONE line

Question

I've been looking for a way to have multiple select option in one line but I just can't get it do. here is a snap of the code part:

<div >
      <p align="left" style="inline">Protocol   
      <select style="inline">
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
    </select>
     </p>


    <p align="left" style="inline">Parity   
    <select>
      <option value="1">valu4</option>
      <option value="2">value5</option>
      <option value="3">value6</option>

    </select>
    </p>
    </div>

Does anyone has a hint how to do this ! Thanks in advance !

score 0 · Accepted Answer · answered Aug 01 '19 at 11:23

0

Just add inline-block to your inline css:

<div>
      <label>Protocol</label>
      <select style="inline-block">
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
    </select>  
    <label>Parity</label>
    <select style="inline-block">
      <option value="1">valu4</option>
      <option value="2">value5</option>
      <option value="3">value6</option>
    </select>
</div>

answered Aug 01 '19 at 11:23

Mark van der Dam

161
12

With that I mean the `style` on the select – Mark van der Dam Aug 01 '19 at 11:26
Great to hear, have fun :} – Mark van der Dam Aug 01 '19 at 11:41
You should be using CSS not `style`. It is bad design to style directly into HTML – Martin Aug 01 '19 at 12:02
For things like this it doesn't matter it is only one line, but thanks for the downvote – Mark van der Dam Aug 01 '19 at 12:32

score 0 · Answer 2 · answered Aug 01 '19 at 11:25

The most simple and lazy solution is to display elements as inline or inline-block.

<div>
  <div style="display:inline-block">
    <p style="display:inline">Protocol</p> 

    <select>
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
    </select>    
  </div>

  <div style="display:inline-block">
    <p style="display:inline">Parity</p>

    <select>
      <option value="1">valu4</option>
      <option value="2">value5</option>
      <option value="3">value6</option>
    </select>
  </div>
</div>

https://codepen.io/anon/pen/ymXwYE

I recommend you to read a little about CSS display property. Or learn how to work with Flexbox or any CSS framework like Bootstrap / TailwindCSS.

having mutiple select in ONE line

2 Answers2