简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mehrere Elemente innerhalb eines Elements ausrichten: eine Schritt-für-Schritt-Anleitung
P粉946336138
P粉946336138 2024-04-01 23:21:40
0
2
375

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
P粉2765774602024-04-02 21:14:54 2 Etage

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

Wie +0
Antwort hinzufügen
P粉231079976
P粉2310799762024-04-02 13:06:46 1 Etage

您需要将 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;
  }
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！