Nav不在页面顶部？

我试图让我的资产净值在页面的右上方，但它显示像100像素从上而下。我不知道是什么原因造成这种情况，我尝试改变标题中其他内容的填充和边距，但我无法解决它。任何帮助？Nav不在页面顶部？

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

来源

2017-02-26 Cían Mac Tiarnáin

您可以检查您的网站浏览器的开发者工具。在大多数浏览器中，您可以使用“Ctrl + Shift + i”打开它们。然后，您可以使用检查员查看导致不需要的定位的原因。 – Schwesi

@Schwesi我已经做到了，它拥有的资产净值一大橙色空间，无论我如何努力和改变的标志（这似乎是源）我不能修复它 –

这是一个块级元素，使用'显示将其改为内联或内联块的属性。 – pol

您已设置您的header .container nav ul浮动的权利，这是在你的div#menu而这也正是该空间来：空间是由引起svg元素，你的'汉堡'菜单。

这里是一个解决方案：

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

来源

2017-02-26 13:20:38 Mers

完美！非常感谢你:) –

不客气:) – Mers

Nav不在页面顶部？

回答

相关问题