简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Ich kann das Logo nicht an der Navigationsleiste ausrichten
P粉921130067
P粉921130067 2024-04-02 11:13:17
0
1
312

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粉921130067
P粉921130067

Antworte allen(1)
P粉378890106
P粉3788901062024-04-03 10:39:48 1 Etage

您必须将 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
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！