Ich erstelle eine Webseite und habe Probleme mit Navar und den Links. Meine Navar-Gegenstände blieben nicht im Navar, sondern schwebten nach unten. Außerdem funktioniert text-decoration: none;
nicht, meine Links sind unterstrichen und mit einem Punkt versehen.
.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>
Ich habe es versucht border-bottom: none
和 list-style-type: none;
und es hat nicht funktioniert.
Für die Navigationsleiste habe ich es versucht flex-direction: row
und das hat auch nicht funktioniert.
navbar__links
navbar__menu
这两个类名在 HTML 中拼写错误