css - 在没有绝对位置的标题中制作导航栏

Question

我不确定如何将页眉内的导航栏移到框外，现在没有背景颜色。我之前有它的绝对位置并且它有效但我试图找到另一种选择。我希望 Logo 也与导航重叠并且导航延伸到标题的整个宽度

它在我的浏览器中是这样出现的

它在 JS fiddle 中看起来不一样 这是我的代码: http://jsfiddle.net/9nspQ/

HTML

<header>
<img src="../assets/images/logo.png" alt="">
<nav>
<ul>
 <li><a href="#">Tours &amp; Prices</a></li>
 <li><a href="#">Standard Flights</a></li>
 <li><a href="#">Meet the Staff</a></li>
 <li><a href="#">Charters</a></li>
</ul>
</nav>
</header>

CSS

header {
height: 100px;
background-color: #001D5D;
}

nav {
right:0;
bottom:0;
padding:10px;
background-color:#1CCEAE;
}

nav ul {
margin-left: 500px;
}

nav li {
display: inline-block;
margin-right: 20px;
}

nav li a {
text-decoration: none;
font-size: 1em;
color:white;    
}

Answer 1

仅供引用:右:0；下:0；如果没有分配位置则无效

您有很多元素，我不太确定它们的用途。我假设您在应用程序中处理的代码更多。

试试这个:

.container {
    width: 960px;
    margin:0 auto;
    background-color: blue;
}
#logo{
    height:100px;
    width:100px;
    z-index:10;
    top:10px;
    position:absolute;
}
header {
    padding-top:50px;
    height: 70px;
    background-color: #001D5D;
}
nav {
    width:960px;
    padding:10px 0 10px;
    text-align:right;
    background-color:#1CCEAE;    
}
nav li {
    display: inline-block;
}
nav li a {
    text-decoration: none;
    font-size: 1em;
    color:white;    
}

DEMO

我会这样做:

   #logo{
    height:100px;
    width:100px;
    z-index:10;
    top:15px;
    left:30px;
    position:absolute;
}
header {
    width:100%;
    height: 80px;
    background-color: #001D5D;
}
ul {
    width: 100%;
    height:50px;
    line-height:50px;
    padding:0;
    margin:0;
    text-align:right;
    background-color:#1CCEAE;    
}
ul li {
    display: inline-block;
    padding-right:10px;
}
ul li a {
    text-decoration: none;
    font-size: 1em;
    color:white;    
}

DEMO