Ich möchte verschiedene Elemente innerhalb eines Elements ausrichten! Ich habe versucht, Element eine Flexbox zu geben und die darin enthaltenen Elemente selbst anzupassen! Aber es reagiert nicht richtig! Die Listenelemente sollten in einer Reihe angeordnet sein, mit dem linken Link links und dem rechten Link rechts! Das Logo sollte in der Mitte sein!
<!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;
}
//Ich habe auch justify-items ausprobiert, aber es hat nicht geholfen!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我想如果我理解正确的话，
ul是父级。将display: flex分配给它，因为它是父级。您需要将 Flex 属性应用于
ulul { display: flex; flex-direction: row; flex-wrap: wrap; }要使 Items 位于屏幕侧面和徽标中心，只需将 header 设置为
justify-content: space- Between这是您需要更改的完整列表
.header { display: flex; flex-direction: row; justify-content: space-between; } ul { display: flex; flex-direction: row; flex-wrap: wrap; }