Inline-Blöcke horizontal auf derselben Linie ausrichten

Problem

Inline-Blöcke bieten Vorteile gegenüber schwebenden Elementen, wie z. B. Grundlinienausrichtung und automatische Zentrierung wenn das Ansichtsfenster schmal wird. Das horizontale Ausrichten von zwei Inline-Blöcken auf derselben Linie kann jedoch eine Herausforderung darstellen.

Herausforderungen bei der Inline-Block-Ausrichtung

• Floats können die Grundlinienausrichtung beeinträchtigen und einen unerwünschten Umlauf verursachen .
• Relative und absolute Positionierung können zu Abstandsproblemen führen, ähnlich wie bei Gleitkommazahlen.

Lösung: Textausrichtung verwenden

Eine effektive Lösung ist die Verwendung der Textausrichtung : Rechtfertigungstechnik:

CSS-Code

.header {
    text-align: justify;
    background: #ccc;
}

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

Erklärung

• Setzen Sie die Textausrichtung des übergeordneten Elements auf „justify“, um den Text gleichmäßig über seine Breite zu verteilen.
• Fügen Sie einen Pseudoelement-Header hinzu:danach um den verbleibenden Platz zwischen den Inline-Blöcken zu verbrauchen.
• Setzen Sie die Inline-Blöcke h1 und .nav auf display: inline-block und Vertical-align: baseline, um ihre Grundlinien beizubehalten.