搜索

首页  >  问答  >  正文

对齐元素内的多个项目:分步指南

我想在一个元素内对齐不同的项目!我尝试给 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粉946336138P粉946336138231 天前449

全部回复(2)我来回复

  • P粉276577460

    P粉2765774602024-04-02 21:14:54

    我想如果我理解正确的话, ul 是父级。将 display: flex 分配给它,因为它是父级。

    回复
    0
  • P粉231079976

    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;
      }

    回复
    0
  • 取消回复