下拉菜单对齐一行

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%;">