html - 如何使左浮和右浮在同一行上？

Question

问题:

     **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:我使用 ma​​rgin-top: -20px 来拉起搜索框，但我认为这不是一个好的做法。

有人可以帮忙吗？非常感谢!

---

Answer 1

已经提到的解决方案的替代方案是翻转标记的顺序，以便右侧 float 的元素排在第一位。

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