Skip to content Skip to sidebar Skip to footer
Home / Css / Drop Down Menu / Formatting / Html

How Do I Get Two Drop Down List To Be Displayed Side By Side?

Post a Comment
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

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><divclass="ex"><formid='dd1.mob1'name='dd1.mob1'method='post'action=' '><p><label>Select Company</label></p><br/><selectonchange=filter.submit()name='dd1mob1'id='dd1mob1'><option>1</option><option>2</option>" . $options . "
        </select></form><formclass="ey"id='dd2.mob1'name='dd2.mob1'method='post'action=''><p><label>Select Mobile</label></p><br/><selectonchange=filter.submit()name='dd2mob1'id='dd2mob1'>
            " . $options . "
        </select></form></div><divclass="ex"><formid='dd1.mob2'name='dd1.mob2'method='post'action=' '><p><label>Select Company</label></p><br/><selectonchange=filter.submit()name='dd1mob2'id='dd1mob2'><option>1</option><option>2</option>" . $options . "
        </select></form><formclass="ey"id='dd2.mob2'name='dd2.mob2'method='post'action=''><p><label>Select Mobile</label></p><br/><selectonchange=filter.submit()name='dd2mob2'id='dd2mob2'>
            " . $options . "
        </select></form></div><divclass="ex"><formid='dd1.mob3'name='dd1.mob3'method='post'action=' '><p><label>Select Company</label></p><br/><selectonchange=filter.submit()name='dd1mob3'id='dd1mob3'><option>1</option><option>2</option>" . $options . "
        </select></form><formclass="ey"id='dd2.mob3'name='dd2.mob3'method='post'action=''><p><label>Select Mobile</label></p><br/><selectonchange=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><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><divstyle="display:block;"><select><option>test1</option><option>test2</option></select><select><option>test1</option><option>test2</option></select></div></body></html>

Solution 3:

The quickest CSS fix is to add something like

form
 {

     float:left;
 }

But you may need to think about restructuring as individual forms isn't often a good idea.

Then in the same way you can use the elements to position.

Solution 4:

Working with the code given, add the following css

.ex, form {
float: left;
}  

label{
    padding: 15px;
}

A fiddler.

That said, I would still recommend cleaning your code and not using so many forms.

Post a Comment for "How Do I Get Two Drop Down List To Be Displayed Side By Side?"