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

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