Html 如何使两个下拉列表并排显示？_Html_Css_Drop Down Menu_Formatting

Html 如何使两个下拉列表并排显示？

html css drop-down-menu formatting

Html 如何使两个下拉列表并排显示？,html,css,drop-down-menu,formatting,Html,Css,Drop Down Menu,Formatting,我一直在尝试创建两个并排显示的下拉列表，但无法理解。设置什么CSS元素属性来执行此操作。我必须以以下格式显示： [company] [mobile] 而不是 [company] [mobile] 有3对这样的。另外，两个选择下拉框似乎并没有坚持其划分 <html> <head> <style> body { background-image:url('gradient1.jpg'); background-repeat:repe

我一直在尝试创建两个并排显示的下拉列表，但无法理解。设置什么CSS元素属性来执行此操作。我必须以以下格式显示：

[company]     [mobile]

而不是

[company]

[mobile]

有3对这样的。另外，两个选择下拉框似乎并没有坚持其划分

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


身体
{
背景图片：url（'gradient1.jpg'）；
背景重复：重复-x；
}
前任
{
保证金：自动；
宽度：90%；
填充：10px；
边界：开始；
}
选择
{
显示：内联；
光标：指针；
}
安永先生
{
显示：内联；
} 
缺口
{
明确：两者皆有；
边缘底部：2px；
}
选择公司


1.
2.“$options”
选择移动设备


“$options。”
选择公司


1.
2.“$options”
选择移动设备


“$options。”
选择公司


1.
2.“$options”
选择移动设备


“$options。”

最快的CSS修复方法是添加如下内容

form
 {

     float:left;
 }

但您可能需要考虑重组，因为单个表单通常不是一个好主意

然后以同样的方式，您可以使用元素来定位

这将并排显示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>


测试1
测试2
测试1
测试2

使用给定的代码，添加以下css

.ex, form {
float: left;
}  

label{
    padding: 15px;
}

尽管如此，我仍然建议清理代码，不要使用太多表单。

试试这个-

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

有关

display:inline块的详细说明，请参见此线程
您确定每个选定元素都需要表单吗？如果您希望块是内联的，请使用float:left样式表示块，如果使用br clear=“both”表示停止浮动，则在块上方使用br clear=“both”表示停止浮动。我认为，对于这么多表单元素，您的目标css外观会有很多问题。@Eugene:我添加了一个.gap类，并将其添加到所有div元素中，这就是您的意思吗？我曾经使用过seprate表单，因为第二个下拉列表的值取决于第一个下拉列表的值。添加float:left样式作为表单，它们必须是inlinet，这确实使它们并排出现，但同时它们都移出了分区。不过，谢谢你消除了最初的疑虑。