Wie richte ich zwei Inline-Block-Elemente links und rechts auf derselben Linie aus?

Zwei Inline-Blöcke links und rechts auf derselben Linie ausrichten

In der modernen Webentwicklung werden zwei Inline-Block-Elemente links und rechts ausgerichtet auf der gleichen Linie kann eine scheinbar komplexe Aufgabe sein. Der Einsatz der richtigen Techniken kann den Ansatz jedoch vereinfachen.

Flexbox

Flexbox bietet eine unkomplizierte Lösung. Durch Anwenden von display: flex auf den übergeordneten Container und justify-content: space-between auf seine untergeordneten Container können Elemente mit gleichem Abstand an gegenüberliegenden Enden des Containers platziert werden. Dies kann einfach wie folgt implementiert werden:

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

Text-Align: Justify

Eine alternative Technik besteht darin, text-align: justify für das übergeordnete Element zu verwenden. Dies erfordert jedoch zusätzliche Hacks, um die Kompatibilität mit älteren Browsern sicherzustellen:

<code class="css">.header {
    text-align: justify;
    /* IE 7 */
    *width: 100%;
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}</code>

Um zu verhindern, dass mit dem Pseudoelement :after zusätzlicher Platz eingefügt wird, kann ein Trick angewendet werden:

<code class="css">.header {
    font-size: 0;
}
h1, .nav {
    font-size: 14px;
}</code>

Indem Sie die Schriftgröße des übergeordneten Elements auf 0 setzen und diese für die untergeordneten Elemente zurücksetzen, kann das Problem behoben werden.

Das obige ist der detaillierte Inhalt vonWie richte ich zwei Inline-Block-Elemente links und rechts auf derselben Linie aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!