So richten Sie Inline-Blöcke auf derselben Linie aus: Flexbox vs. Textausrichtung?

Inline-Blöcke auf derselben Linie ausrichten: Eine umfassende Lösung

Während das Ausrichten von Inline-Blöcken auf derselben Linie eine Herausforderung sein kann, gibt es effektive Lösungen. Schauen wir uns zwei häufig verwendete Ansätze genauer an.

Option 1: Flexbox

Flexbox bietet eine unkomplizierte und flexible Möglichkeit, die gewünschte Ausrichtung zu erreichen. Durch Anwenden von display: flex; Zum übergeordneten Container können Sie die Platzierung seiner untergeordneten Container mithilfe von justify-content: space-between; manipulieren. Dieser Ansatz bietet eine hervorragende browserübergreifende Kompatibilität.

<code class="css">.header {
  display: flex;
  justify-content: space-between;
}</code>

Option 2: Textausrichtung

Für eine breitere Browserunterstützung können Sie die Technik „text-align: justify“ zusammen mit Star-Hacks für verwenden ältere Versionen von Internet Explorer.

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

h1 {
  display: inline-block;
  margin-top: 0.321em;
}

.nav {
  display: inline-block;
  vertical-align: baseline;
}</code>

Diese Methode behebt das Fehlen einer Trennung zwischen Inline-Block-Elementen, indem ein leeres Element mithilfe des :after-Pseudoelements hinzugefügt wird:

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

To Beseitigen Sie zusätzlichen Platz, der durch das :after-Pseudoelement verursacht wird, setzen Sie die Schriftgröße für das übergeordnete Element auf 0 und setzen Sie sie für untergeordnete Elemente auf den gewünschten Wert zurück:

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

Das obige ist der detaillierte Inhalt vonSo richten Sie Inline-Blöcke auf derselben Linie aus: Flexbox vs. Textausrichtung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!