简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Correction du code de la barre de navigation qui n'était pas très bon, cela provoquait des problèmes de liens rompus, je ne sais pas pourquoi

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.

P粉004287665P粉004287665180 Il y a quelques jours349

répondre à tous(1)je répondrai

  • P粉709307865

    P粉7093078652024-04-05 00:58:51

    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 

    
portfolio

    Ça marche très bien pour moi (ignorez <br/>s je suis juste paresseux :D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj

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

    répondre
    0
  • Annulerrépondre