我正在学习 html 和 css，我正在尝试制作带有导航按钮的标题，但我根本无法使布局正常工作。标题图像周围有一个我无法摆脱的边框，无论我做什么，带有链接的列表都不会叠加在图像之上。谁能帮忙？
我在 codepen 上有代码(请原谅图片，它们是临时的):http://codepen.io/anon/pen/NPxYBa
否则，我使用的代码是:
#header {
position: initial;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: 20;
}
#nav {
position: initial;
z-index: 30;
}
li {
top: 50%;
left: 50%;
margin-left: 250px;
display: inline;
}<body style="background-image:url(http://wallpoper.com/images/00/28/58/17/orange-background_00285817.jpg)">
<div class="header">
<img src="http://p1.pichost.me/640/58/1822357.jpg" width="1920" height="100" />
<div class="nav">
<ul>
<li><a href="">home</a>
</li>
<li><a href="">portfolio</a>
</li>
<li><a href="">resume</a>
</li>
<li><a href="">about</a>
</li>
<li><a href="">contact</a>
</li>
</ul>
</div>
</div>最佳答案
菜单在图像上的解决方案不止一种，您可以改用背景图像，但如果您想像这样保留它，您可以将导航设置为 position: absolute;。要使菜单居中，您可以将其设置为 left: 0;、right: 0; 和 margin: 0 auto;
.nav
{
position: absolute;
top: 0;
left: 0;
right: 0;
}
关于css - 间距和分层不适用于图像和列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27366163/