一行 2 个 div，中间有表单
我试图让一个 div 向左浮动，一个 div 向右浮动，但中间有一个表单，该表单中有 2 个选择元素（下拉框）。
我可以得到它，所以我有：
Div<------------->Text<------------->Div
但不是
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>
I'm trying to get one div to float left, and one div to float right, but have a form in between, the form has 2 select elements(drop down boxes) in it.
I can get it so I have:
Div<------------->Text<------------->Div
but not
Div<------------->Form<------------->Div
If I just have an empty form element than it works like the text, but as soon as I put the 2 selects in then the right div drops down a line, the same happens if I put a textbox(input, type text) in place of the 2 selects.
This is the code I have so far (Note I'm not using stylesheet for the moment, but I will eventually)
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
HTML
，考虑将 CSS 样式放在自己的 CSS 文件中，并通过 ID 和类进行引用。
The HTML
<form>element is by default a block element like as<div>is. It will always go in its own new line. You need to eitherdisplayitinlineor tofloatit toleftas well. Since the two other div's are already floated, easiest is to just float the form as well. E.g.That said, consider placing CSS style in its own CSS file and reference by ID's and classes.
有一种更简单的方法可以做到这一点。 CSS“display: inline-block”是最容易使用的。与普遍的看法相反，如果使用正确的技巧，它确实具有完美的跨浏览器支持。下面是一个例子：（zoom和*display是为了让IE玩得好）
There is a much easier way to do this. Css "display: inline-block" is the easiest thing to use. Contrary to popular belief, it DOES have perfect crossbrowser support if the correct tricks are used. Here is an example: (zoom and *display are to make IE play nice)
原因是您没有为 div 和表单分配 width 属性。如果你浮动了 2 个 div，表单也应该浮动。
宽度是随机给定的。使用此工具来确定宽度值
The reason is that you have not assigned width property for divs and forms. If you have floated 2 divs, form should also be floated.
The width is random given. Use this tool to decide the width value
我不得不放弃浮动，因为没有一个答案真正起作用（不想设置宽度，jdc0589的答案没有使div左右浮动，当我这样做时它坏了，向左浮动表格显然成功了不在中心）所以我不得不使用绝对定位：
I had to ditch the floating, as none of the answers really worked (don't want to set widths, jdc0589's answers didn't float the divs left and right, and when I did it broke, and floating the form left obviously made it not in the center) so I had to use absolute positioning: