recherche

Maison  >  Questions et réponses  >  le corps du texte

Je n'arrive pas à aligner le logo avec la barre de navigation

Je suivais un tutoriel YouTube et j'ai écrit exactement le même code mais je n'arrive pas à aligner mon logo avec la navigation comme le leur 

* {
  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>

J'ai essayé d'utiliser Vertical-align: center et Display: inline-block sous le sélecteur de la barre de navigation mais cela n'a pas fonctionné non plus

P粉921130067P粉921130067240 Il y a quelques jours445

répondre à tous(1)je répondrai

  • P粉378890106

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

    Vous devez mettre nav 标记放入 navbar dans un 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

    répondre
    0
  • Annulerrépondre