Warum sind die Inline-Block-Elemente falsch ausgerichtet? Wie löst ich dieses Problem?

Inline-Block-Element-Fehlausrichtungsproblem und Bewältigungsstrategien

Im Webseitenlayout erfolgt die Fehlausrichtung von Inline-Block-Elementen von Zeit zu Zeit, was den Front-End-Entwicklern zu viel Mühe macht. Dieser Artikel wird die Ursachen dieses Problems analysieren und wirksame Lösungen bereitstellen.

Problemphänomen

Angenommen, die HTML-Struktur lautet wie folgt, einschließlich zwei Inline-Block-Elementen:

<div>
    <span class="desc">11<br> Zweiundzwanzig<br> 33<br> 44</span>
    <span>Andere Inhalte</span>
</div>

CSS -Stil:

 Span {
    Anzeige: Inline-Block;
}
.desc {
    Überlauf: versteckt;
}

Nachdem das .desc -Element auf overflow: hidden , kann das zweite span vertikale Fehlausrichtung auftreten.

Die Grundursache der Versetzung

Das Problem der Fehlausrichtung ergibt sich aus dem Basisausrichtungsmechanismus des Inline-Block-Elements. overflow: hidden Attribut beeinflusst die Basisposition des Elements, was zu Abweichungen führt, wenn das nachfolgende Inline-Block-Element mit der Grundlinie des vorherigen Elements ausgerichtet ist.

Effektive Lösung

Dieses Problem kann gelöst werden, indem das vertical-align -Attribut angepasst wird. Modifizierter CSS -Code:

 .desc {
    Anzeige: Inline-Block;
    Breite: 80px;
    Höhe: 80px;
    Überlauf: versteckt;
    vertikaler Align: Mitte; /* Schlüsseländerung*//
}

Span {
    Anzeige: Inline-Block;
    vertikaler Align: Mitte; /* Schlüsseländerung*//
}

Setzen Sie vertical-align in middle ein, um alle Inline-Block-Elemente mit einer vertikalen Mittellinie auszurichten, wodurch eine Fehlausrichtung durch Ausrichtung der Grundlinienvermittlung vermieden wird.

Durch die obigen Analyse und Lösungen können wir das Problem der Fehlausrichtung des Inline-Block-Elements effektiv vermeiden und die Genauigkeit und Ästhetik des Webseitenlayouts verbessern.

Das obige ist der detaillierte Inhalt vonWarum sind die Inline-Block-Elemente falsch ausgerichtet? Wie löst ich dieses Problem?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!