我想在一个元素内对齐不同的项目！我尝试给 Element 一个弹性盒并自行调整里面的项目！但它没有正确响应！列表项应排成一行，左链接在左侧，右链接在右侧！徽标应位于中心！
<!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;
}
//我也尝试了 justify-items，但没有帮助！
P粉2310799762024-04-02 13:06:46
您需要将 Flex 属性应用于 ul
ul {
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;
}