如何使浮子向左并漂浮在同一条线上？

Question

问题：

     **The left part** (#nav ul li) which float: left
     and **the right part** (#nav .search) which float: right
            **are not in a line**.

应该是这样的：

但是我的：

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 ​​：使用 bootsrap 来构建布局，而不是单独使用它，我在页脚上使用它，它完全在同一条线上！但我仍然不知道它是如何工作的

解决方案2 ：我使用 margin-top：-20px 来提取搜索框，但我认为这不是一个好习惯。

任何人都可以提供帮助吗？非常感谢！

---

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或标记。

Answer 2

它无法按预期工作的原因是左侧的<ul>向右扩展，从而推动了内容。解决方案可能是为左右区域设置一个明确的固定宽度，这是我在过去遇到这种情况时所做的。但是会说，花车甚至绝对定位的混合最终会起作用。

Answer 3

您必须使用绝对定位并使用左右对齐。

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

点击此处http://jsfiddle.net/A8SyJ

Answer 4

您是否尝试将搜索添加为导航中的另一个列表项并将其浮动到右侧？

<li class="search"><input type="text" name="search" id="search" value="search"></li>

请参阅以下示例：

http://jsfiddle.net/teWP5/

Answer 5

您可以使用float：left表示ul，使用float：右搜索框