Mehrere Elemente innerhalb eines Elements ausrichten: eine Schritt-für-Schritt-Anleitung
P粉946336138
P粉946336138 2024-04-01 23:21:40
0
2
456

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!

P粉946336138
P粉946336138

Antworte allen(2)
P粉276577460

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

P粉231079976

您需要将 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;
  }
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage