Html 如何让两个下拉列表并排显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16424594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i get two drop down list to be displayed side by side?
提问by Aman Mehrotra
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:
我一直试图让两个下拉列表并排显示，但无法弄清楚。要设置什么 CSS 元素属性来执行此操作。我必须以以下格式显示它：
[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.
有 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>
回答by apaul
Try this- Example
试试这个 -例子
.ey
{
display:inline-block;
}
form{
display:inline-block;
}
See this thread for a good explanation of display: inline-block;
请参阅此线程以获取有关 display: inline-block;
What is the difference between display: inline and display: inline-block?
回答by Albert Prats
this displays 2 dropdown list side by side:
这并排显示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>
回答by grey_hat
The quickest CSS fix is to add something like
最快的 CSS 修复是添加类似
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.
然后以同样的方式您可以使用元素进行定位。
