Je souhaite aligner différents éléments au sein d'un même élément ! J'ai essayé de donner à Element une flexbox et d'ajuster moi-même les éléments qu'elle contient ! Mais il ne répond pas correctement ! Les éléments de la liste doivent être alignés, avec le lien de gauche à gauche et le lien de droite à droite ! Le logo doit être au centre !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div>
</body>
</html>
.header {
font-family: monospace;
background: papayawhip;
display: flex;
align-items: center;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}
.header .left-links {
display: flex;
justify-content: flex-start; //I tried justify-items also, but it doesn't help!
flex-direction: row;
}
.header .logo {
display: flex;
justify-content: center;
}
.header .right-links {
display: flex;
justify-content: flex-end;
flex-direction: row;
}
//J'ai aussi essayé de justifier les éléments mais cela n'a pas aidé !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je pense que si je comprends bien,
ul是父级。将display: flexlui est attribué car c'est le parent.Vous devez appliquer les propriétés Flex à
ulul { display: flex; flex-direction: row; flex-wrap: wrap; }Pour positionner les éléments sur les côtés de l'écran et le logo au centre, réglez simplement l'en-tête sur
justify-content: space- BetweenVoici la liste complète des modifications que vous devez apporter
.header { display: flex; flex-direction: row; justify-content: space-between; } ul { display: flex; flex-direction: row; flex-wrap: wrap; }