我想在一个元素内对齐不同的项目!我尝试给 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; }