html - 下拉菜单在一行中对齐

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加上总边距将为20像素，两者加起来将达到 960 像素。