導航代碼不工作

今天，我試圖做一個簡單的CSS導航欄，你知道，沒有任何工作，我只是被困住了！沒有代碼工作，甚至填充不起作用。任何幫助？導航代碼不工作

https://codepen.io/anon/pen/gxYdPx < <演示

另外我的代碼，

的style.css

body { 
 
    \t margin: 0; 
 
    } 
 
    .navigation { 
 
    \t background-color: #ecf0f1; 
 
    \t width: 100%; 
 
    \t height: 90px; 
 
    } 
 
    .navigation ul { 
 
    \t overflow: hidden; 
 
    \t list-style-type: none; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 
    
 
    .navigation li { 
 
    \t float: right; 
 
    } 
 
    
 
    .navigation li a { 
 
    \t display: block; 
 
     color: white; 
 
     text-align: center; 
 
    
 
    
 
     text-decoration: none; 
 
    }

index.html 
 

 
<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
\t \t <title>ZadxHost - The Best You Can Imagine!</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <!-- Navigation Bar --> 
 
\t \t <div class="navigation"> 
 
\t \t \t <h1>ZadxHost</h1> 
 

 
\t \t \t <ul> 
 
\t \t \t \t <a href="#"><li>Home</li></a> 
 
\t \t \t \t <a href="#"><li>Panel</li></a> 
 
\t \t \t \t <a href="#"><li>Pricing</li></a> 
 
\t \t \t \t <a href="#"><li>Contact Us</li></a> 
 
\t \t \t </ul> 
 
\t \t </div> 
 

 
\t </body> 
 
</html>

來源

2017-07-22 Ahad Aman Hunzai

你正在使用錯誤的結構裏面ul你需要有列表項不錨，所以正確的方法是'ul> li> a' –

你需要把a元素li元素中，而不是其他方式。

所以......

<ul> 
     <li><a href="#">Home</a></li> 
     //..... 
    </ul>

在你的CSS的目標是.navigation li a的那一刻，不會與當前的結構工作。

來源

2017-07-22 17:45:55 Brett

導航代碼不工作

回答

相關問題