Pourquoi les décorations de texte et les barres de navigation ne fonctionnent-elles pas ?

Question

Je crée une page web et j'ai des problèmes avec Navar et les liens. Mes objets Navar ne sont pas restés dans le Navar mais ont flotté vers le bas. De plus, text-decoration: none; ne fonctionne pas, mes liens sont soulignés et précédés d'un point.

.navbar {
  background: black;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.navbar__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

<nav class="navbar">
  <div class="navbar__container">
    <a href="#home" id="navbar__logo"> COLOR</a>
    <div class="navbar__toggle" id="mobile-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    <ul class="nabar__menu">
      <li class="navbar__item">
        <a href="#home" class="nabvar__links" id="hope-page">HOME</a>
      </li>
      <li class="navbar__item">
        <a href="#about" class="nabvar__links" id="about-page">ABOUT</a>
      </li>
      <li class="navbar__item">
        <a href="#services" class="nabvar__links" id="services-page">SERVICES</a>
      </li>
      <li class="navbar__btn">
        <a href="#sign-up" class="button" id="signup">SIGN UP</a>
      </li>
    </ul>
  </div>
</nav>

J'ai essayé border-bottom: none 和 list-style-type: none; et ça n'a pas fonctionné. Pour la barre de navigation, j'ai essayé flex-direction: row et ça n'a pas marché non plus.

Answer 1

navbar__links navbar__menu Ces deux noms de classes sont mal orthographiés en HTML

.navbar {
  background: black;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.navbar__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

  

     COLOR
    

      
      
      
    
    

      

        HOME
      
      

        ABOUT
      
      

        SERVICES
      
      

        SIGN UP