如何使浮动左和浮动在同一行？ [英] How to make the float left and float right on the same line?

问题描述

问题：

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

The CSS:

#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}

#nav .search{
float: right;
}

---

我的解决方案：

解决方案1 ​​：使用 bootsrap 建立布局，而不是自己做，页脚，它完全在同一行！但我仍然不知道它是如何工作的

Solution 1: Use bootsrap to build layout instead of doing it on my own, i use it on the footer, and it's perfectly on the same line! Yet I still don't know how it works

解决方案2 ：我使用 margin-top：-20px 将搜索框向上拉，但我不认为它是良好实践。

Solution 2: I use margin-top: -20px to pull the search box up, but I don't think it is a good practice.

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

Any one can help? Many thanks!

推荐答案

左侧的< ul> 向右扩展，从而将内容向下推。解决方案可能是为左右区域设置一个显式的固定宽度，这是我在过去面对这种情况时所做的。但是会说，浮动，甚至绝对定位的混合是最终会工作。

The reason it doesn’t work as expected is that the <ul> on the left is expanding out to the right, thus pushing the content down. The solution might be to set an explicit fixed width for the left and right areas which is what I have done when I have faced this scenario in the past. But will say that a mix of floats and even absolute positioning is what will ultimately work.

这篇关于如何使浮动左和浮动在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！