Pourquoi les décorations de texte et les barres de navigation ne fonctionnent-elles pas ?
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.
