12

问题：

     **左边部分**（#nav ul li）浮动：left
     和**右侧部分**（#nav .search）浮动：对
            **不在一条线上**。

它应该是这样的： 在此处输入图像描述

但我的： 在此处输入图像描述

的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拉起搜索框，但我认为这不是一个好习惯。

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

4

5 回答 5

16

已经提到的解决方案的替代方案是翻转标记的顺序，以便右浮动项首先出现。

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

于 2015-08-08T07:55:42.010 回答
8

它不能按预期工作的原因是<ul>左侧的 向右侧扩展，从而将内容向下推。解决方案可能是为左右区域设置一个明确的固定宽度，这是我过去遇到这种情况时所做的。但是会说浮动甚至绝对定位的混合最终会起作用。

于 2013-01-23T02:54:53.390 回答
4

您必须使用绝对定位并使用左右对齐。

#nav ul, #nav .search {
    margin: 5px;
    position: absolute;
    display: inline-block;
}

检查这里http://jsfiddle.net/A8SyJ

于 2013-01-23T03:08:07.930 回答
0

您是否尝试将搜索添加为导航中的另一个列表项并将其浮动到右侧？

<li class="search"><input type="text" name="search" id="search" value="search"></li>

请参见下面的示例：

http://jsfiddle.net/teWP5/

于 2013-01-23T03:06:26.013 回答
0

您可以将 float:left 用于 ul 并将 float:right 用于搜索框

于 2013-01-23T10:20:57.490 回答