我如何得到兩個下拉列表並排顯示？

我一直在試圖使兩個下拉列表並排顯示，但無法弄清楚。什麼CSS元素屬性設置來做到這一點。我必須表明它的格式如下：的我如何得到兩個下拉列表並排顯示？

[company]  [mobile]

代替

[company] 

[mobile]

有3個這樣的對。此外，這對2個選擇的下拉框似乎並不堅持其劃分。

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

來源

2013-05-07 Aman Mehrotra

一個很好的解釋你確定，你需要一種形式爲每個選擇元素？使用float：left樣式的塊，如果你想要內聯，並且使用br clear =「both」的塊來停止浮動 – Eugene 2013-05-07 17:04:01

我會認爲有很多表單元素會對目標css有很多問題尋找你想要什麼。 – Justin 2013-05-07 17:06:25

@Eugene：我添加了一個.gap類，並添加到所有的div元素，這是你的意思？由於第二個下拉列表的值取決於1st的值，因此我使用了單獨的窗體。 – 2013-05-07 17:15:23

嘗試這個 - Example

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

看到這個線程的display: inline-block;

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

來源

2013-05-07 17:24:27 apaul

完美的工作！感謝：D – 2013-05-07 17:26:50

最快的CSS的解決辦法是添加類似

form 
{ 

    float:left; 
}

但是你可能需要考慮結構調整個體形式往往不是一個好主意。

然後以相同的方式，您可以使用元素來定位。

來源

2013-05-07 17:04:57

，它們並排地將它們並排放置，但同時它們都從其分區中移出。感謝雖然清除了最初的疑問。 – 2013-05-07 17:24:28

此顯示由側2下拉列表側：

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

來源

2013-05-07 17:08:02

這涵蓋了我所嘗試的基礎。謝謝:) – 2013-05-07 17:27:33

具有給定代碼的工作中，添加以下的CSS

.ex, form { 
float: left; 
} 

label{ 
    padding: 15px; 
}

fiddler甲。

這就是說，我仍然會建議清理你的代碼，而不是使用這麼多的表單。

來源

2013-05-07 17:11:40 Justin

我如何得到兩個下拉列表並排顯示？

回答

相關問題