今天，我试图制作一个简单的 css 导航栏，但你知道，没有任何效果，我只是被卡住了!没有代码有效，甚至填充也无效。 有什么帮助吗？
https://codepen.io/anon/pen/gxYdPx <<演示
另外还有我的代码，
样式.css
body {
margin: 0;
}
.navigation {
background-color: #ecf0f1;
width: 100%;
height: 90px;
}
.navigation ul {
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li {
float: right;
}
.navigation li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
}index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>ZadxHost - The Best You Can Imagine!</title>
</head>
<body>
<!-- Navigation Bar -->
<div class="navigation">
<h1>ZadxHost</h1>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Panel</li></a>
<a href="#"><li>Pricing</li></a>
<a href="#"><li>Contact Us</li></a>
</ul>
</div>
</body>
</html>最佳答案
您需要将 a 元素放在 li 元素中，而不是相反。
所以...
<ul>
<li><a href="#">Home</a></li>
//.....
</ul>
目前您的 CSS 目标是 .navigation li a，这不适用于您当前的结构。
关于html - 导航栏代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45257444/