html - 如何在同一行上向左 float 和向右 float ？

问题:

     **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:

<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>向右扩展，因此将内容压低了。解决方案可能是为左右区域设置一个明确的固定宽度，这是我过去面对这种情况时所做的。但是要说的是， float 和混合甚至是绝对定位才是最终可行的方法。