在没有绝对位置的标题中创建导航栏

Question

我不确定如何将标题内的导航栏移到框外，现在没有背景颜色。我之前有绝对位置并且它有效但我正在寻找另一种替代方案。我希望徽标也与导航重叠，导航伸展到标题的整个宽度

这样在我的浏览器中出现了

它在JS小提琴中看起来不同 这是我的代码： 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