HTML 導航欄鏈接不可點擊
[英]HTML Nav bar links not clickable
問題描述
上周我一直在學習 HTML 和 CSS，並決定弄亂導航欄。 我已經設置好了，但現在頂部的鏈接不可點擊？ 我已經檢查過以確保我沒有錯過任何基本的東西，比如結束標簽，但找不到類似的東西。
* { margin: 0; padding: 0; } html { background-color: #808080; background-image: url("https://hdqwalls.com/download/simple-gray-abstract-background-wi-1920x1080.jpg"); background-repeat: no-repeat; } #landing__container { height: 100vh; width: 100%; } header { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 0, 0, 0.4); } header h1 { color: white; font-family: impact; font-weight: normal; } header ul { display: flex; justify-content: flex-end; align-items: center; height: 30px; } header ul li { list-style: none; } header a { font-family: helvetica; font-weight: bold; font-size: 18px; text-decoration: none; color: white; margin: 30px; } #landing__center { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } #landing__center h2 { padding-bottom: 20px; color: white; font-family: Impact; font-weight: normal; font-size: 40px; } #landing__center p { padding-top: 20px; color: white; font-family: helvetica; font-weight: normal; font-size: 20px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Navigation Bar Practice</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="landing__container"> <!-- Navigation Bar --> <header> <nav id="nav__bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="landing__center"> <h2>Testing</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum asperiores illum maiores aliquid quo perferendis, blanditiis facere temporibus laudantium! </p> </section> </div> </body> </html>
我知道代碼可能並不完美和/或干凈，但請記住我已經這樣做了一個星期。
3 個解決方案
解決方案1
2 2019-01-29 08:56:32
您已經制作了此部分#landing__center position:absolute和top:0這就是它出現在導航欄頂部的原因。 我已將頂部增加到 30。謝謝
* { margin: 0; padding: 0; } html { background-color: #808080; background-image: url("https://hdqwalls.com/download/simple-gray-abstract-background-wi-1920x1080.jpg"); background-repeat: no-repeat; } #landing__container { height: 100vh; width: 100%; } header { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 0, 0, 0.4); } header h1 { color: white; font-family: impact; font-weight: normal; } header ul { display: flex; justify-content: flex-end; align-items: center; height: 30px; } header ul li { list-style: none; } header a { font-family: helvetica; font-weight: bold; font-size: 18px; text-decoration: none; color: white; margin: 30px; } #landing__center { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; top: 30; /*changed*/ bottom: 0; left: 0; right: 0; position: absolute; } #landing__center h2 { padding-bottom: 20px; color: white; font-family: Impact; font-weight: normal; font-size: 40px; } #landing__center p { padding-top: 20px; color: white; font-family: helvetica; font-weight: normal; font-size: 20px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Navigation Bar Practice</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="landing__container"> <!-- Navigation Bar --> <header> <nav id="nav__bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="landing__center"> <h2>Testing</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum asperiores illum maiores aliquid quo perferendis, blanditiis facere temporibus laudantium! </p> </section> </div> </body> </html>
解決方案2
2 2019-01-29 08:56:34
您需要添加z-index和position: relative對於您的代碼
header{
z-index: 1;
position: relative;
}
解決方案3
1 已采納 2019-01-29 09:11:49
該問題是由#landing__center覆蓋導航欄引起的，因為它選擇了#landing__container作為要與之相對的元素
一種方法是創建一個包裝器，作為#landing__center的容器，而不是#landing__container 。 所以它是相對於它自己的容器而不是它的父容器，而不是干擾它的兄弟姐妹
* { margin: 0; padding: 0; } html { background-color: #808080; background-image: url("https://hdqwalls.com/download/simple-gray-abstract-background-wi-1920x1080.jpg"); background-repeat: no-repeat; } #landing__container { height: 100vh; width: 100%; } header { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 0, 0, 0.4); } header h1 { color: white; font-family: impact; font-weight: normal; } header ul { display: flex; justify-content: flex-end; align-items: center; height: 30px; } header ul li { list-style: none; } header a { font-family: helvetica; font-weight: bold; font-size: 18px; text-decoration: none; color: white; margin: 30px; } .wrapper { position: relative; height: 95%; } #landing__center { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } #landing__center h2 { padding-bottom: 20px; color: white; font-family: Impact; font-weight: normal; font-size: 40px; } #landing__center p { padding-top: 20px; color: white; font-family: helvetica; font-weight: normal; font-size: 20px; }
<body> <div id="landing__container"> <!-- Navigation Bar --> <header> <nav id="nav__bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div class="wrapper"> <section id="landing__center"> <h2>Testing</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum asperiores illum maiores aliquid quo perferendis, blanditiis facere temporibus laudantium! </p> </section> </div> </div> </body>
如何使導航欄可點擊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.