如何使左浮动和右浮动在同一行？

Question

问题：

    **左边部分** (#nav ul li) 使用 float: left
    和 **右边部分** (#nav .search) 使用 float: right
            **未在同一行上。**

应该像这样：

但我的效果是：

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>       

CSS：

#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}

#nav .search{
float: right;
}

---

我的解决方案：

方案1：使用 bootstrap 建立布局，而不是自己手动建立，我在页脚部分使用了它，并且它完美地与同一行！但我仍然不知道它是如何工作的。

方案2：我使用 margin-top: -20px 来上移搜索框，但我认为这不是一个好的做法。

有人能帮忙吗？非常感谢！

---

- Alex G

---

这里看起来很好 http://jsfiddle.net/arunpjohny/PZhpm/1/ - Arun P Johny

Answer 1

除了已经提到的解决方案之外，另一种方法是将标记的顺序颠倒过来，让右浮动的项首先出现。

#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>

你不需要做其他任何事情。不需要其他CSS或标记。

- Mr Lister

Answer 2

它无法按预期工作的原因是左侧的 <ul> 正在向右扩展，从而将内容向下推。解决方案可能是为左侧和右侧区域设置明确的固定宽度，这是我过去面临此场景时所做的。但会说一句混合使用浮动和绝对定位最终会起作用。

- Giacomo1968

Answer 3

您需要使用绝对定位并进行左右对齐。

#nav ul, #nav .search {
    margin: 5px;
    position: absolute;
    display: inline-block;
}

请检查这里http://jsfiddle.net/A8SyJ

- Jon P

Answer 4

你尝试过将搜索作为导航中的另一个列表项添加并向右浮动吗？

以下是示例代码：

http://jsfiddle.net/teWP5/

- jjsquared

Answer 5

您可以使用float:left为ul，使用float:right为搜索框

- nexus_07