css - 一行 2 个 div，中间有表格

Question

我想让一个 div 向左浮动，一个 div 向右浮动，但中间有一个表单，该表单中有 2 个选择元素(下拉框)。

我能得到它所以我有:

分区<------------>文本<------------>分区

但不是

Div<------------>Form<------------>Div

如果我只有一个空的表单元素而不是它像文本一样工作，但是一旦我放入 2 个选择然后右边的 div 下降一行，如果我放一个文本框(输入，键入文本) 代替 2 个选择。

这是我目前的代码(注意我暂时没有使用样式表，但我最终会)

<div class="nav" style="text-align:center;">

<div class="prev" style="float:left;"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1">

<select id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>

</form>

<div style="float:right;" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>

Answer 1

HTML <form>元素默认为 block element喜欢 <div>是。它将始终处于自己的新行中。您需要 display它inline或 float它到left以及。由于其他两个 div 已经 float ，最简单的方法是也 float 表单。例如

<form style="float: left;">

也就是说，考虑将 CSS 样式放在它自己的 CSS 文件中并通过 ID 和类进行引用。