Css 一行上有两个div，中间有表单

我试着让一个div向左浮动，一个div向右浮动，但中间有一个表单，表单中有两个选择元素（下拉框）

我可以得到它，所以我有：

DivTextDiv

但不是

DivFormDiv

如果我只是有一个空的表单元素，但它的工作原理与文本类似，但是一旦我放入2个selects，右div就会下拉一行，如果我放入一个textbox（输入，键入text）来代替2个selects，同样的情况也会发生

这是我到目前为止的代码（请注意，我暂时不使用样式表，但最终会使用）

一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014

默认情况下，HTML

元素与

类似。它总是走自己的新路线。您需要

显示
它
内联
或
浮动
它到
左侧
。因为另外两个div已经浮动，所以最简单的方法就是也浮动表单。例如

<form style="float: left;">



这样说，考虑将CSS样式放置在自己的CSS文件中，并用ID和类来引用。
 < P> HTML >代码> < /C>元素默认情况下类似于<代码> <代码>。它总是走自己的新路线。您需要
显示
它
内联
或
浮动
它到
左侧
。因为另外两个div已经浮动，所以最简单的方法就是也浮动表单。例如

<form style="float: left;">



这样说，考虑将CSS样式放置在自己的CSS文件中，并用ID和类来引用。
原因是您没有为div和窗体分配宽度属性。若你们已经浮动了2个div，那个么表单也应该浮动
<div class="nav" style="text-align:center;">
<div class="prev" style="float:left;width:200px; background-color:#454545"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1" style="width:200px; background-color:#454545; float:left">

</form>

<div style="float:right;width:200px; background-color:#454545" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>



宽度是随机给定的。用于确定宽度值
原因是尚未为div和forms指定宽度属性。若你们已经浮动了2个div，那个么表单也应该浮动

<div class="nav" style="text-align:center;">
<div class="prev" style="float:left;width:200px; background-color:#454545"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1" style="width:200px; background-color:#454545; float:left">

</form>

<div style="float:right;width:200px; background-color:#454545" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>



宽度是随机给定的。用于确定宽度值有一种更简单的方法。Css“display:inline block”是最容易使用的。与流行的观点相反，如果使用正确的技巧，它确实有完美的交叉支持。下面是一个例子：（缩放和*显示是为了让IE玩得更好）


.元素
{
显示：内联块；
缩放：1；
*显示：内联；
}
这里的东西。。。。
更多的东西
有一种更简单的方法可以做到这一点。Css“display:inline block”是最容易使用的。与流行的观点相反，如果使用正确的技巧，它确实有完美的交叉支持。下面是一个例子：（缩放和*显示是为了让IE玩得更好）


.元素
{
显示：内联块；
缩放：1；
*显示：内联；
}
这里的东西。。。。
更多的东西
我不得不放弃浮动，因为没有一个答案真正起作用（我不想设置宽度，jdc0589的答案没有将div左右浮动，当我这样做时，它坏了，将表单向左浮动显然使它不在中心），所以我不得不使用绝对定位：

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

<div style="display:inline; position:absolute; top:0px; left:0px; min-width:105px;" class="prev"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

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

<select style="" 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 style="" 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="display:inline; position:absolute; top:0px; right:0px;  min-width:105px;" class="next"><a href="/index.php?m=9" rel="nofollow">July »</a></div>

</div>


一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
我不得不放弃浮动，因为没有一个答案真正起作用（我不想设置宽度，jdc0589的答案没有将div左右浮动，当我这样做时，它坏了，将表单向左浮动显然使它不在中心），所以我不得不使用绝对定位：

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

<div style="display:inline; position:absolute; top:0px; left:0px; min-width:105px;" class="prev"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

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

<select style="" 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 style="" 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="display:inline; position:absolute; top:0px; right:0px;  min-width:105px;" class="next"><a href="/index.php?m=9" rel="nofollow">July »</a></div>

</div>


一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
浮动很好，但经常被滥用。现在使用它还可以，但是有更好的解决方案（内联块）是的，我将把CSS样式放在它自己的CSS文件中，只是把它放在HTML文件中，直到我把它排序。当然，将表单向左浮动会使其不在中心位置？浮动很好，但经常被滥用。现在使用它还可以，但是有更好的解决方案（内联块）是的，我将把CSS样式放在它自己的CSS文件中，只是把它放在HTML文件中，直到我把它排序。当然，将表单向左浮动会使其不在中间？但是div中的锚中的文本是动态的，我不明白为什么我必须指定宽度，这会降低灵活性。但是div中的锚中的文本是动态的，我不明白为什么我必须指定宽度，这会降低灵活性。我尝试过，这一点在Firefox和chrome中非常有效（和往常一样），即使我在div中添加了float:right，其中包含更多内容。但在opera中，在我添加float之前，它是很好的：直接添加到more stuff div，然后div跳下一行？这种方法不应该使用float。如果需要以相同方式显示另一个元素，只需在其上添加“element”类即可。如果它仍然跳下一行，那只是因为没有足够的空间放在前一行上（元素比可用的元素宽），但您给出的是：
DivFormDiv
，而我希望
DivFormDiv
不遵循您的符号，但是如果我尝试过的话，你可以在包装div中包含内嵌块元素，这在Firefox和chrome中效果很好（和往常一样），即使我在div中添加了float:right，它会显示更多内容。但在opera中，在我添加float之前，它工作得很好：直接添加到more stuff div，然后div跳下一行？你不应该这样做