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不在頁面頂部？

回答

相關問題