我的导航栏并没有一直在浏览器中向上移动。 看我的代码和您将了解的图片! https://ibb.co/YZZjRx8
导航栏上有一个白色的“东西”。我想要导航栏在顶部!
我删除了一些
标签。我还删除了一些其他标签,但没什么重要!<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="main.css" />
<ul class="topnav" style="position:sticky">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
body {
margin: 0;
padding: 0;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #4CAF50;
}
@media screen and (max-width: 600px) {
ul.topnav li {
float: none;
}
}
我的错误在哪里?看照片。
答案 0 :(得分:0)
如果您添加以下内容,我认为它会起作用:
ul {
margin: 0;
padding: 0;
}
答案 1 :(得分:0)
body {
margin: 0;
background: gray;
}
header {
position: sticky;
top: 0;
/* */
background: blue;
color: white;
}
<header>
header
</header>
https://jsfiddle.net/sheriffderek/t16zwo92/
在这里,您可以创建最小可复制的示例
答案 2 :(得分:0)
我已经解决了您的问题,并保存在此文件中。请检查。
ul
标签只是空白。
https://www.w3schools.com/code/tryit.asp?filename=G960GIC7YCC3