Html 如何使浮动在同一条线上向左浮动和向右浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14471662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the float left and float right on the same line?
提问by Alex G
The Problem:
问题：
**The left part** (#nav ul li) which float: left
and **the right part** (#nav .search) which float: right
**are not in a line**.
it should be like this:
它应该是这样的：
but mine:
但我的：
The HTML:
HTML：
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="search">
<input type="text" name="search" id="search" value="search">
</div>
The CSS:
CSS：
#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}
#nav .search{
float: right;
}
My Solutions:我的解决方案：
Solution 1: Use bootsrapto build layout instead of doing it on my own, i use it on the footer, and it's perfectly on the same line! Yet I still don't know how it works
解决方案1：使用bootsrap来构建布局而不是我自己做，我在页脚上使用它，它完全在同一行！但我仍然不知道它是如何工作的
Solution 2: I use margin-top: -20pxto pull the search box up, but I don't think it is a good practice.
解决方案 2：我使用margin-top: -20px来拉起搜索框，但我认为这不是一个好习惯。
Any one can help? Many thanks!
任何人都可以帮忙吗？非常感谢！
采纳答案by JakeGould
The reason it doesn't work as expected is that the <ul>on the left is expanding out to the right, thus pushing the content down. The solution might be to set an explicit fixed width for the left and right areas which is what I have done when I have faced this scenario in the past. But will say that a mix of floats and even absolute positioning is what will ultimately work.
它没有按预期工作的原因是<ul>左边的正在向右扩展，从而将内容向下推。解决方案可能是为左右区域设置明确的固定宽度，这是我过去遇到这种情况时所做的。但是会说浮动甚至绝对定位的混合最终会起作用。
回答by Mr Lister
An alternative to the solutions already mentioned is to flip the order of the markup around, so that the right-floating item comes first.
已经提到的解决方案的替代方案是翻转标记的顺序，以便右侧浮动的项目首先出现。
#nav ul li {
float: left;
list-style: none;
margin: 0 20px;
}
#nav .search {
float: right;
}<div id="nav">
<div class="search">
<input type="text" name="search" id="search" value="search">
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>You don't have to do anything else. No other CSS or markup is needed.
你不必做任何其他事情。不需要其他 CSS 或标记。
回答by Jon P
You have to use absolute positioning and use left and right alignment.
您必须使用绝对定位并使用左右对齐。
#nav ul, #nav .search {
margin: 5px;
position: absolute;
display: inline-block;
}
Check here http://jsfiddle.net/A8SyJ
回答by nexus_07
You can use float:left for the ul and float: right with the search box
您可以将 float:left 用于 ul 和 float: right 与搜索框一起使用
回答by jjsquared
Have you tried adding the search as another list item within your nav and floating that to the right?
您是否尝试将搜索添加为导航中的另一个列表项并将其向右浮动？
<li class="search"><input type="text" name="search" id="search" value="search"></li>
<li class="search"><input type="text" name="search" id="search" value="search"></li>
See the example below:
请参阅下面的示例：
