Question

所以我试图为这个图像http://reversl.net/demo/中显示的标题获取导航布局，但我在浏览导航链接和搜索栏时遇到困难，这两个链接都是列表项目相同的<ul>这是我目前所在的地方http://reversl.net/banner/我的HTML看起来像这样

<div id="header">
<div id="wrap">
<div class="logo">
<h1>Logo</h1>
</div><!--.logo-->
<ul id="nav-primary"> 
<li> <input type="text" name="search" value="Search" /> </li> 
    <li><a href="#">Log In</a></li> 
    <li><a href="#">Sign up</a></li> 
    <li class="about"><a href="#">About</a>     
</li> 
</ul><!--#nav-primary-->
</div><!--#wrap-->
</div><!--#header-->

我目前的造型是

#header {
width: 100%;
margin: 0 auto;
background: #666;
-webkit-box-shadow: 0 6px 6px -6px #999;
-moz-box-shadow: 0 6px 6px -6px #999;
box-shadow: 0 6px 6px -6px #999;
}

.logo {
float: left;    
}

#nav-primary {
clear: both;
margin: 0;
padding: 0;
}

#nav-primary li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

#nav-primary a {
float: right;
line-height: 1;
padding: 0 10px 0 10px;
text-decoration: none;
color: #999;
border-left: 1px solid #888;
}

#wrap {
width: 90%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px; /* Set footer height. */
}

如你所见，我无法做到的是;

1）浮动“两个”搜索栏并向右导航 2）链接'border-left'是否填充了导航栏的高度（可能是通过显示块右边？

有什么建议吗？

Answer 1

请参阅小提琴代码和演示输出。

小提琴：http://jsfiddle.net/qn2mC/6

演示：http://jsfiddle.net/qn2mC/6/embedded/result/

浮动标题导航问题

1 个答案: