Warum sind Inline-Block-Elemente vertikal falsch ausgerichtet und wie kann ich das beheben?

Diskrepanz bei der vertikalen Ausrichtung eines Inline-Block-Elements

Warum weist ein Inline-Block-Element mit Inhalt eine vertikale Fehlausrichtung auf?

Erklärung:

Die CSS-Eigenschaft Vertical-Align Richtet standardmäßig die Grundlinie des Elements an der Grundlinie des übergeordneten Elements aus. Wenn das Element keine Einlaufzeilenfelder hat oder seine Überlaufeigenschaft nicht sichtbar ist, wird die Grundlinie an der unteren Randkante ausgerichtet.

Im bereitgestellten Beispiel fehlt dem .divAccountData-Element zunächst der Inhalt. Infolgedessen wird seine Grundlinie an der unteren Randkante seines übergeordneten Elements ausgerichtet, was zu einer Fehlausrichtung mit dem .divAccountPicker-Element führt.

Lösung:

Um beide Elemente vertikal auszurichten, Setzen Sie die Vertical-Align-Eigenschaft des .divAccountData-Elements auf top:

.divAccountData {
  vertical-align: top;
  /* Other CSS properties... */
}

Dadurch wird sichergestellt, dass die Grundlinie des Das .divAccountData-Element wird am oberen Rand des .divAccountPicker-Elements ausgerichtet.

Zusätzliche Überlegungen:

• Das Problem kann auch durch Hinzufügen von Text zum .divAccountData-Element behoben werden. divAccountData-Element, das eine Eingangszeilenbox erstellt und die Grundlinie zurücksetzt.
• Die Grundlinienausrichtung wird beeinflusst durch die Anzahl der Zeilen in jedem Element. Wenn die Anzahl der Zeilen variiert, ist es notwendig, die vertikale Ausrichtung mit „vertikal-align:top“ auf beiden Elementen zu erzwingen.

Das obige ist der detaillierte Inhalt vonWarum sind Inline-Block-Elemente vertikal falsch ausgerichtet und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!