Wie richtet man Inline-Blöcke horizontal auf derselben Linie aus?

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 Floats.

Lösung: Textausrichtung verwenden

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

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

• Stellen Sie die Textausrichtung des übergeordneten Elements auf „Blocksatz“ ein, um den Text gleichmäßig über seine Breite zu verteilen.
• Fügen Sie ein Pseudoelement header:after hinzu, um den verbleibenden Platz zwischen den Inline-Blöcken zu verbrauchen.
• Stellen Sie die Inline-Blöcke h1 und .nav auf die Anzeige ein: inline-block und Vertical-align : Grundlinie, um ihre Grundlinien beizubehalten.

Das obige ist der detaillierte Inhalt vonWie richtet man Inline-Blöcke horizontal auf derselben Linie aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!