我想在一个元素内对齐不同的项目！我尝试给 Element 一个弹性盒并自行调整里面的项目！但它没有正确响应！列表项应排成一行，左链接在左侧，右链接在右侧！徽标应位于中心！
2
833
Flex Header
.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，但没有帮助！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我想如果我理解正确的话，
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; }