Question

我正在尝试将导航设置在页面的右上角，但它从顶部显示为100px。我不知道是什么造成了这个，我试图改变标题中其他东西的填充和边距但我无法解决它。有帮助吗？

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CT Designs | Home</title>
    <!-- Stylesheets-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1> CT Designs </h1>
        </div>
        <div id="menu">
          <svg height="40px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
        </div>
        <nav>
          <ul>
            <li>Home</li>
            <li>About Me</li>
            <li>Projects</li>
            <li>Contact</li>
          </ul>
        </nav>
      </div>
    </header>

  <script src="jquery-3.1.1.min" href="main.js"></script>
  </body>
</html>

CSS：

body {
  margin: 0;
  padding: 0;
}

.container {
  min-width: 80%;
  float: center;
}

ul {
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("../resources/img/header.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

header .container #branding h1 {
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 70px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #fff;
  margin-top: -0.5em;
  padding: 30px;
  border: solid 3px #fff;
}

header .container #menu {
  margin: 10px;
  padding: 0;
  width: 100px;
}

header .container #menu svg {
  cursor: pointer;
  margin: 0;
  padding: 0;
}

header .container #menu svg path.fill {
  fill: white;
}

header .container nav ul {
  float: right;
  margin-bottom: 40px;
}

header .container ul li {
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-family: Roboto;
  padding-right: 20px;
}

Answer 1

您已将header .container nav ul设置为右移，位于div#menu下方，空间即将来临：空间由您拥有的svg元素引起， '汉堡包'菜单。

这是一个解决方案：

#menu {
  float: left;
}
header .container nav ul {
  float: right;
  margin-top: 20px;
}

导航不在页面顶部？

1 个答案: