Je ne sais pas vraiment comment expliquer ce problème, mais essentiellement, ma barre de navigation fixe soit ne défile pas mais les hyperliens fonctionnent, soit la barre de navigation défile mais les hyperliens ne fonctionnent pas. Cette boucle continue de se produire lorsque j'essaie de la corriger en HTML et CSS. J'apprécierais vraiment de l'aide à ce sujet.
Voici le html de la barre de navigation :
<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>
Je jure que ça n'a pas l'air si compliqué dans les atomes
Voici le CSS de la barre de navigation :
Je sais que j'ai trop de "types de styles de liste", je dois encore supprimer les redondants.
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;
}
Je suis assez nouveau dans le HTML et le CSS, alors n'hésitez pas à me faire honte pour des choses stupides, mais honnêtement, je suis triste.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oh, la première chose que j'ai remarquée, c'est que chaque élément li est suivi de
</li>deux fois :) Probablement une saisie semi-automatique. Je ne suis pas sûr de ce que vous entendez par « la barre de navigation fixe ne défile pas, mais les hyperliens fonctionnent » ?Mais quand j'essaye dans jsFiddle et que j'ajoute
Ça marche très bien pour moi (ignorez
<br/>sje suis juste paresseux :D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSjEdit : Je sais que vous avez écrit que vous le supprimeriez, mais juste pour être sûr - juste
<ul>需要list-style-type: none;:) J'ai joué avec votre CSS et je recommanderais d'utiliser flex au lieu de float, c'est plus sûr, mais c'est peut-être juste moi Préférence, j'espère que cela ne vous dérange pas..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; }