How do i get two drop down list to be displayed side by side?

html css drop-down-menu formatting

40,499

Solution 1

Try this- Example

 body
 {
  background-image:url('gradient1.jpg');
  background-repeat:repeat-x;
 }
 .ex
 {
  margin:auto;
  width:90%;
  padding:10px;
  border:outset;
 }
 select
 {
  display:inline;
  cursor:pointer;
 }
.ey
 {
  display:inline-block;
 } 
form{
    display:inline-block;
}
.gap
 {
  clear:both;
  margin-bottom:2px;
  }

 <body>
<div class="ex">
    <form id='dd1.mob1' name='dd1.mob1' method='post' action=' '>   
        <p><label>Select Company</label></p><br/>
        <select onchange=filter.submit() name='dd1mob1' id='dd1mob1'>
            <option>1</option>
            <option>2</option>" . $options . "
        </select>
    </form>
    <form class="ey" id='dd2.mob1' name='dd2.mob1' method='post' action=''> 
        <p><label>Select Mobile</label></p><br/>
        <select onchange=filter.submit() name='dd2mob1' id='dd2mob1'>
            " . $options . "
        </select>
    </form>
</div>
<div class="ex">
    <form  id='dd1.mob2' name='dd1.mob2' method='post' action=' '>  
        <p><label>Select Company</label></p><br/>
        <select onchange=filter.submit() name='dd1mob2' id='dd1mob2'>
            <option>1</option>
            <option>2</option>" . $options . "
        </select>
    </form>
    <form class="ey" id='dd2.mob2' name='dd2.mob2' method='post' action=''> 
        <p><label>Select Mobile</label></p><br/>
        <select onchange=filter.submit() name='dd2mob2' id='dd2mob2'>
            " . $options . "
        </select>
    </form>
</div>
<div class="ex">
    <form  id='dd1.mob3' name='dd1.mob3' method='post' action=' '>  
        <p><label>Select Company</label></p><br/>
        <select onchange=filter.submit() name='dd1mob3' id='dd1mob3'>
            <option>1</option>
            <option>2</option>" . $options . "
        </select>
    </form>
    <form class="ey" id='dd2.mob3' name='dd2.mob3' method='post' action=''> 
        <p><label>Select Mobile</label></p><br/>
        <select onchange=filter.submit() name='dd2mob3' id='dd2mob3'>
            " . $options . "
        </select>
    </form>
</div>

.ey
 {
  display:inline-block;
 } 
form{
    display:inline-block;
}

See this thread for a good explanation of display: inline-block;

What is the difference between display: inline and display: inline-block?

Solution 2

this displays 2 dropdown list side by side:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div style="display:block;">
        <select>
            <option>test1</option>
            <option>test2</option>
        </select>
        <select>
            <option>test1</option>
            <option>test2</option>
       </select>
   </div>
 </body>
</html>

40,499

Author by

Aman Mehrotra

Updated on October 14, 2021

Comments

Aman Mehrotra over 2 years

I've been trying to make two drop down lists to be displayed side by side but can't figure it out. What CSS element property to set to do this. I have to show it in the following format:

[company]     [mobile]

instead of

[company]

[mobile]

There are 3 such pairs. Also the pair of 2 select drop boxes doesn't seem to stick to its division.

<html>
 <head>
   <style>
     body
     {
      background-image:url('gradient1.jpg');
      background-repeat:repeat-x;
     }
     .ex
     {
      margin:auto;
      width:90%;
      padding:10px;
      border:outset;
     }
     select
     {
      display:inline;
      cursor:pointer;
     }
    .ey
     {
      display:inline;
     } 
    .gap
     {
      clear:both;
      margin-bottom:2px;
      }
   </style>
 </head>
 <body>
    <div class="ex">
        <form id='dd1.mob1' name='dd1.mob1' method='post' action=' '>   
            <p><label>Select Company</label></p><br/>
            <select onchange=filter.submit() name='dd1mob1' id='dd1mob1'>
                <option>1</option>
                <option>2</option>" . $options . "
            </select>
        </form>
        <form class="ey" id='dd2.mob1' name='dd2.mob1' method='post' action=''> 
            <p><label>Select Mobile</label></p><br/>
            <select onchange=filter.submit() name='dd2mob1' id='dd2mob1'>
                " . $options . "
            </select>
        </form>
    </div>
    <div class="ex" class="gap" >
        <form  id='dd1.mob2' name='dd1.mob2' method='post' action=' '>  
            <p><label>Select Company</label></p><br/>
            <select onchange=filter.submit() name='dd1mob2' id='dd1mob2'>
                <option>1</option>
                <option>2</option>" . $options . "
            </select>
        </form>
        <form class="ey" id='dd2.mob2' name='dd2.mob2' method='post' action=''> 
            <p><label>Select Mobile</label></p><br/>
            <select onchange=filter.submit() name='dd2mob2' id='dd2mob2'>
                " . $options . "
            </select>
        </form>
    </div>
    <div class="ex" class="gap">
        <form  id='dd1.mob3' name='dd1.mob3' method='post' action=' '>  
            <p><label>Select Company</label></p><br/>
            <select onchange=filter.submit() name='dd1mob3' id='dd1mob3'>
                <option>1</option>
                <option>2</option>" . $options . "
            </select>
        </form>
        <form class="ey" id='dd2.mob3' name='dd2.mob3' method='post' action=''> 
            <p><label>Select Mobile</label></p><br/>
            <select onchange=filter.submit() name='dd2mob3' id='dd2mob3'>
                " . $options . "
            </select>
        </form>
    </div>
 </body>
</html>

Aman Mehrotra almost 11 years

that did bring them side by side but at the same time they all shifted out of their divisions. thanks though clears the initial doubt.