Question

我一直试图让两个下拉列表并排显示，但无法弄清楚。要设置什么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>

Answer 1

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

Answer 2

试试这个 - Example

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

有关display: inline-block;

的详细说明，请参阅此主题

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

Answer 3

最快的CSS修复是添加类似

的内容

form
 {

     float:left;
 }

但你可能需要考虑重组，因为个别形式通常不是一个好主意。

然后以同样的方式使用元素来定位。

Answer 4

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

.ex, form {
float: left;
}  

label{
    padding: 15px;
}

A fiddler。

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

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

4 个答案: