html – 如何使浮动向左并在同一条线上浮动？

问题：

     **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来提取搜索框,但我不认为这是一个好习惯.

任何人都可以帮忙吗？非常感谢！

解决方法

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