Wie kann ich Inline-Blöcke links und rechts auf derselben Linie ausrichten?

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

Die richtige Ausrichtung von Inline-Blöcken kann eine Herausforderung sein. Dieses Problem tritt auf, wenn versucht wird, zwei Inline-Blöcke, einen links und einen rechts, in einer einzelnen Zeile zu positionieren.

Es gibt jedoch Lösungen, die dieses Dilemma lösen können. Während die Verwendung von Floats möglicherweise nicht ideal ist, um die Grundlinienausrichtung beizubehalten und auf Fenstergrößenänderungen zu reagieren, bieten andere Techniken mehr Flexibilität.

Verwendung von Flexbox für eine effiziente Ausrichtung

Moderne Browser bieten Unterstützung für Flexbox, das einen präzisen und anpassungsfähigen Ansatz für die Ausrichtung bietet. Indem Sie dem übergeordneten Container display: flex und seinen untergeordneten Containern justify-content: space-between zuweisen, können Sie sie effektiv voneinander trennen und gleichzeitig sicherstellen, dass sie in derselben Zeile bleiben.

.header {
    display: flex;
    justify-content: space-between;
}

Nutzung der Textausrichtungs-Ausrichtungstechnik

Wenn Flexbox nicht unterstützt wird, sollten Sie die Verwendung der Textausrichtungs-Ausrichtungstechnik in Betracht ziehen. Dieser Ansatz verteilt den Leerraum gleichmäßig zwischen Wörtern und Zeilen und erzeugt so einen Effekt, der dem Blocksatz in Textverarbeitungsprogrammen ähnelt.

.header {
    text-align: justify;
}

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

Diese Technik erfordert jedoch zusätzliche Überlegungen für Browser wie IE7 und früher, wo „Star-Hacks“ werden benötigt, um die Kompatibilität sicherzustellen.

Bekämpfung von Leerraumartefakten

In manchen Fällen können Inline-Blöcke unerwünschte Leerräume einführen, die sich auf die Ausrichtung auswirken. Um dieses Problem zu beheben, können Sie die Schriftgröße des übergeordneten Elements auf 0 setzen und sie für die untergeordneten Elemente auf den gewünschten Wert zurücksetzen. Dieser Ansatz eliminiert effektiv alle zusätzlichen Lücken, die durch das in der text-align:justify-Methode verwendete Pseudoelement entstehen.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline-Blöcke links und rechts auf derselben Linie ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!