一行 2 个 div，中间有表格答案

【问题标题】：2 divs on one line with form in between一行 2 个 div，中间有表格
【发布时间】：2010-08-22 23:25:36
【问题描述】：

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

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

Div文本Div

但不是

Div表格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>

【问题讨论】：

标签： css html css-float

【解决方案1】：

HTML <form> 元素默认是 block element 就像 <div> 一样。它总是会走在自己的新路线上。你需要display它inline或float它到left。由于其他两个 div 已经浮动，最简单的方法是也浮动表单。例如

<form style="float: left;">

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

【讨论】：

浮动很好，但经常被滥用。这是使用它的好时机，但有更好的解决方案（inline-block）
是的，我会将 CSS 样式放入它自己的 CSS 文件中，然后将其放入 HTML 文件中，直到我对其进行排序。确定将表单向左浮动会使其不在中心吗？

【解决方案2】：

有一种更简单的方法可以做到这一点。 Css "display: inline-block" 是最容易使用的东西。与流行的看法相反，如果使用正确的技巧，它确实具有完美的跨浏览器支持。下面是一个例子：（zoom 和 *display 是为了让 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>

【讨论】：

我试过了，它在 Firefox 和 chrome 中运行良好（像往常一样），即使我在 div 中添加了 float:right ，它说更多的东西。但是在歌剧中它工作得很好，直到我将 float:right 添加到 more stuff div，然后 div 跳下一行？
你不应该在这个方法中使用浮点数。如果您需要以相同方式显示另一个元素，只需在其上添加“元素”类即可。如果它仍然跳下一行，那只是因为没有足够的空间来容纳它在前一行（元素比可用的更宽）
但你给的是：<----->DivFormDiv<-----> 而我想要的是Div<----->Form<----->Div
不遵循您的符号，但如果您要这样做，您可以在包装 div 内包含内联块元素

【解决方案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决定宽度值

【讨论】：

但是 div 中的锚点中的文本是动态的，我不明白为什么我必须指定宽度，这会降低灵活性。

【解决方案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>

【讨论】：