suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Mehrere Elemente innerhalb eines Elements ausrichten: eine Schritt-für-Schritt-Anleitung

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粉946336138P粉946336138231 Tage vor447

Antworte allen(2)Ich werde antworten

  • P粉276577460

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

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

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

    Antwort
    0
  • StornierenAntwort