在一条线上的2格与之间的形式

Question

我试图让一个div向左浮动，而一个div向右浮动，但在两者之间有一个窗体，窗体有2个选择元素（下拉框）它。

我能得到它，所以我有：

事业部< ------------->文本< ------------->股利

但不

事业部< ------------->表格< ------------->股利

如果我只是有一个空的表单元素，它的工作方式与文本类似，但是一旦我将2个选择放入右边的div中，就会下降一行，如果我将一个te xtbox（输入，键入文本）代替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

我不得不沟浮动，因为没有一个答案果然奏效（不想设置宽度，jdc0589的回答没“T浮动的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> 

Answer 2

的HTML元素<form>默认情况下是一个block element等作为<div>是。它将始终走在自己的新路线上。您需要display它inline或float它也left以及。由于其他两个div已经浮动，所以最简单的方法就是浮动窗体。例如。

<form style="float: left;"> 

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

Answer 3

原因是您尚未为div和表单分配width属性。如果你已经浮动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> 

宽度是随机给定的。使用this tool来决定宽度值

Answer 4

有一个更简单的方法来做到这一点。 Css“display：inline-block”是最简单的使用方法。与流行的观点相反，如果使用正确的技巧，它会有完美的交叉浏览器支持。下面是一个例子：（变焦和*显示是使IE发挥不错）

<html> 
    <head> 
     <style type="text/css"> 
      .element 
      { 
       display:inline-block; 
       zoom:1; 
       *display:inline; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="element"> 
      Stuff in here.... 
     </div> 
     <form class="element"> 
       <input type="text" name="testInput" /> 
     </form> 
     <div class="element"> 
       More stuff 
     </div> 
    </body> 
</html>