Question

我的导航栏并没有一直在浏览器中向上移动。看我的代码和您将了解的图片！ https://ibb.co/YZZjRx8

导航栏上有一个白色的“东西”。我想要导航栏在顶部！

我删除了一些标签。我还删除了一些其他标签，但没什么重要！

我的HTML文件

<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>

我的CSS文件

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;
    }
}

我的错误在哪里？看照片。

Answer 1

如果您添加以下内容，我认为它会起作用：

ul {
    margin: 0;
    padding: 0;
}

Answer 2

body {
  margin: 0;
  background: gray;
}

header {
  position: sticky;
  top: 0;
  /* */
  background: blue;
  color: white;
}

<header>
  header
</header>

https://jsfiddle.net/sheriffderek/t16zwo92/

在这里，您可以创建最小可复制的示例

https://stackoverflow.com/help/minimal-reproducible-example

Answer 3

我已经解决了您的问题，并保存在此文件中。请检查。 ul标签只是空白。

https://www.w3schools.com/code/tryit.asp?filename=G960GIC7YCC3

导航栏不在顶部

我的HTML文件

我的CSS文件

3 个答案: