suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Ich kann das Logo nicht an der Navigationsleiste ausrichten

Ich habe einem YouTube-Tutorial gefolgt und genau den gleichen Code geschrieben, aber ich kann mein Logo nicht wie ihres an die Navigation anpassen 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
}

nav {
  flex: 1;
  text-align: right;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: #555;
}

p {
  color: #555;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> STUDENT HUB </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navbar">
    <div class="logo">
      <img src="image/logo.png" width="125px" alt="this is an image">
    </div>
  </div>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Commu</a></li>
      <li><a href="">Report</a></li>
      <li><a href="">Help </a></li>
      <li><a href="">Account</a></li>
    </ul>
  </nav>
</body>

</html>

Ich habe versucht, Vertical-align: center und Display: inline-block unter der Navigationsleistenauswahl zu verwenden, aber es hat auch nicht funktioniert

P粉921130067P粉921130067236 Tage vor441

Antworte allen(1)Ich werde antworten

  • P粉378890106

    P粉3788901062024-04-03 10:39:48

    您必须将 nav 标记放入 navbar div 中。

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
}

nav {
  flex: 1;
  text-align: right;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: #555;
}

p {
  color: #555;
}
    



  
   STUDENT HUB

    Antwort
    0
  • StornierenAntwort