Question

我正在学习HTML和CSS，并且我试图用导航按钮制作标题，但我无法让布局工作。标题图片周围有一个我无法摆脱的边框，无论我做什么，带有链接的列表都不会在图像顶部显示。有人可以帮忙吗？

我在codepen上有代码（原谅图像，他们是临时的）：http://codepen.io/anon/pen/NPxYBa

否则，我使用的代码是：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

图片上有多个菜单解决方案，您可以使用背景图片，但如果您想这样离开，可以将导航设置为position: absolute;。要使菜单居中，您可以将其设置为left: 0;，right: 0;和margin: 0 auto;

.nav
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

示例：http://codepen.io/anon/pen/zxrWmb

间距和分层不适用于图像和列表

1 个答案: