導航欄不會位於頁面頂部

-1

頁面頂部與導航欄之間目前存在差距。起初它是固定的，沒有差距。但是，當我解決它時，它增加了差距。 body和html的邊距和填充都設置爲零。導航欄不會位於頁面頂部

html{ 
 
\t font-family: abel; 
 
\t background-color: #a4bdd1 
 
} 
 
body{ 
 
    overflow-x:hidden; 
 
} 
 
nav { 
 
    text-align: center; 
 
    background-color: #e4e6e5; 
 
    position: fixed; 
 
    top: 0; 
 
    \t left: 0; 
 
    \t z-index: 9999; 
 
    \t width: 100%; 
 
    \t border-bottom: solid #05182e 2px; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    padding: 15px; 
 
    font-weight: bold; 
 
    vertical-align: middle; 
 
} 
 

 
nav a{ 
 
\t border: solid black 2px ; 
 
\t border-radius: 25%; 
 
\t padding: 2px; 
 
\t background-color: #cccccc; 
 
\t color: #1f3b5a; 
 
\t text-decoration: none; 
 
\t font-size: 30px; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav a:hover{ 
 
\t font-size: 40px; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav img{ 
 
\t width: 30%; 
 
\t border: none; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav img:hover{ 
 
\t width: 40%; 
 
\t transition: all 0.5s ease-in-out; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="style2.css"> 
 
\t <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> 
 
\t <link href='https://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'> 
 
    \t <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
 
\t <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
 
\t <title>Brampton Thunder Roster</title> 
 
</head> 
 

 
<body> 
 
\t <nav> 
 
\t  <ul> 
 
\t   <li/><img src="images/logo.png" alt="Canadian Women's Hockey League Logo"></li> 
 
\t   <li> <a href="index.html" target="_blank">Home</a></li> 
 
\t   <li> <a href="roster.html" target="_blank">Roster</a></li> 
 
\t   <li> <a href="schedule.html" target="_blank">Schedule</a></li> 
 
\t   <li><a href="http://cwhl.ca" target="_blank"><img src="images/cwhllogo.png"></a></li> 
 

 
\t  </ul> 
 
\t </nav>

來源

2016-02-26 Eleander

的代碼片段對我來說沒有任何差距 – Gavin

這是你<ul>元素導致問題的上邊距。此外，您的第一個開放<li>標記需要刪除斜線：<li/>是錯誤的。

<nav> 
    <ul> 
     <li/><img src="images/logo.png" alt="Canadian Women's Hockey League Logo"></li> 
     <li> <a href="index.html" target="_blank">Home</a></li> 
     <li> <a href="roster.html" target="_blank">Roster</a></li> 
     <li> <a href="schedule.html" target="_blank">Schedule</a></li> 
     <li><a href="http://cwhl.ca" target="_blank"><img src="images/cwhllogo.png"></a></li> 

    </ul> 
</nav>

修復它通過添加：

CSS：

ul { 
    margin: 0; 
}

來源

2016-02-26 23:10:31 MaxRocket

正確的...代碼片段didnt代表所有的CSS – Gavin

所以，解決了嗎？或者，如果沒有，你可以給我你的實際網頁的網址嗎？ – MaxRocket

Im not the op ... – Gavin

導航欄不會位於頁面頂部

回答

相關問題