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

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>左侧向右扩展,从而推动了内容.解决方案可能是为左右区域设置一个明确的固定宽度,这是我在过去遇到这种情况时所做的.但是会说,花车甚至绝对定位的混合最终会起作用.