Ich bin nicht wirklich sicher, wie ich dieses Problem erklären soll, aber im Wesentlichen scrollt meine feste Navigationsleiste entweder nicht, aber die Hyperlinks funktionieren, oder die Navigationsleiste scrollt, aber die Hyperlinks funktionieren nicht. Diese Schleife tritt immer wieder auf, wenn ich versuche, sie in HTML und CSS zu beheben. Ich würde mich wirklich über Hilfe freuen.
Dies ist der HTML-Code der Navigationsleiste:
<body>
<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
<div class="container">
<! <a class="navbar-brand" href="#">insertgenericnamehere</a> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">UX/UI</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#Portfolio">Portfolio</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a></li>
</li>
</ul>
</div>
</div>
</nav>
Ich schwöre, in Atomen sieht es nicht so chaotisch aus
Dies ist das CSS für die Navigationsleiste:
Ich weiß, dass ich zu viele „Listenstiltypen“ habe, ich muss die überflüssigen noch löschen.
ul {
list-style-type: none;
}
{
position: fixed;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
list-style-type: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #04AA6D;
}
Ich bin ziemlich neu in Sachen HTML und CSS, also beschäme mich ruhig für dumme Dinge, aber ehrlich gesagt bin ich traurig.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
哦，我注意到的第一件事是，每个 li 元素后面都有
</li>两次:) 可能是一些自动完成。我不确定您所说的“固定导航栏不滚动，但超链接有效”是什么意思？但是当我在 jsFiddle 中尝试并添加
它对我来说效果很好（忽略
<br/>s我只是懒惰：D） https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj编辑：我知道你写过你将删除它，但为了确定 - 只有
<ul>需要list-style-type: none;:) 我玩了一下你的 css，我建议多使用flex而不是float，它更安全，但这可能只是我的偏好，希望你不要介意。.navbar { position: fixed; top: 0; left: 0; width: 100%; border: 1px solid #e7e7e7; background-color: #f3f3f3; } .navbar-nav { display: flex; gap: 10px; } ul { list-style-type: none; margin: 0; } li a { display: inline-block; color: #666; text-decoration: none; padding: 14px; } li a:hover:not(.active) { background-color: #ddd; } li a.active { color: white; background-color: #04AA6D; }