Question

我试图让一个div向左浮动，并且一个div向右浮动，但是在它们之间有一个表单，表单中有2个选择元素（下拉框）。

我能得到它所以我有：

股利＆LT; -------------＆gt;文字＆LT; -------------＆GT;事业部

但不是

股利＆LT; -------------＆GT;表＆LT; -------------＆GT;事业部

如果我只有一个空的表单元素，而不是像文本那样工作，但是只要我将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已经浮动，最简单的方法就是浮动表单。 E.g。

<form style="float: left;">

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

Answer 2

有一种更简单的方法可以做到这一点。 Css“display：inline-block”是最容易使用的东西。与流行的看法相反，如果使用正确的技巧，它有完美的crossbrowser支持。这是一个例子:(缩放和*显示是为了让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>

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

我不得不抛弃浮动，因为没有任何答案真的有用（不想设置宽度，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>

一行上有2个div，中间有两个

4 个答案: