下拉菜单对齐一行

Question

我已经制作了三个下拉菜单。我想一个接一个地对齐。以下是我正在使用的代码。但它并没有出现在同一条线上。我想要的是第一个应该在左边，第二个应该在中心，第三个应该在右边。

首先是

<div style="float:left;">
<FORM name="mapform" method="POST">
<SELECT name="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform.jump.options[ document.mapform.jump.selectedIndex ].value;" value="Place an Ad!">
</FORM>
</div>

第二是

<div style="float:center;">
<FORM name="mapform2" method="POST">
<SELECT name="jump2" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/discuss">General Discussion</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform2.jump2.options[ document.mapform2.jump2.selectedIndex ].value;" value="Quick View !">
</FORM>
</div>

第三是

<div style="float:right;">
<FORM name="mapform1" method="POST">
<SELECT name="jump1" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=16">Start New General Discussion</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=28">Start New Event</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform1.jump1.options[ document.mapform1.jump1.selectedIndex ].value;" value="Start a Discussion!">
</FORM>
</div>

我在图片

中得到它

Answer 1

没有float:center。浮动前两个div，最后一个右。这应该可以解决问题，假设你有足够的空间容纳一行上的所有元素。

以下是演示：http://jsfiddle.net/MCRUX/

如果您在示例中错过了它，我将每个容器div的宽度设置为30%：

<div style="float:left;width:30%;">

Answer 2

使用包含3列的表格来对齐下拉框。

<table width="100%">
  <tr>
    <td align="left">{drop down box 1}</td>
    <td align="center">{drop down box 2}</td>
    <td align="right">{drop down box 3}</td>
  </tr>
</table>

Answer 3

正如@Asad所说，没有任何东西叫做 float：center 。如果放置div的父元素的大小具有固定大小，则可以进行一些数学计算并确定要放置的div的大小。

例如，如果我有一个 960px 的父框并想在其中放置3个div，我会做这样的事情......

div.children {
width:313.33px;
margin-right:10px;
float:left;
}

div.children:last-child {
margin-right:0;
}

由于 313.33 X 3~940 加上总保证金将 20px ，两者都将加起来为960px。