Wie kann man Inline-Block-Elemente ohne zusätzlichen vertikalen Platz richtig ausrichten?

Korrekte Textausrichtung von Inline-Block-Elementen mit „text-align: justify;“

In mehreren Diskussionen wurden die Herausforderungen einer gleichmäßigen Verteilung untersucht Text über Inline-Block-Elemente hinweg mit „text-align: justify;“. Ein anhaltendes Problem ist jedoch der leere vertikale Raum, der unterhalb der Elementzeile erscheint.

Die vorgeschlagene Problemumgehung, wie in dieser Geige zu sehen ist, beinhaltet die Einstellung von „line-height: 0;“ auf dem übergeordneten Element. Allerdings geht dadurch die zuvor festgelegte Zeilenhöhe der untergeordneten Elemente verloren.

Eine alternative Lösung, die in dieser Geige vorgestellt wird, behebt dieses Problem, ohne die Zeilenhöhe zu beeinflussen:

CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Erklärung

Die „Anzeige: block“ auf dem „:before“-Element mit einem negativen unteren Rand hebt den Text um eine Zeilenhöhe an und eliminiert so die zusätzliche Zeile. Die „position: relative“ auf den Inline-Block-Elementen wirkt dieser Verschiebung entgegen, jedoch ohne das Hinzufügen einer zusätzlichen Zeile.

Die Verwendung von „em“ in den Einstellungen „margin-bottom“ und „top“ berücksichtigt jede eingestellte Zeilenhöhe ein Multiplikatorwert. Dadurch wird sichergestellt, dass die Verschiebung mit der beabsichtigten Zeilenhöhe übereinstimmt.

Zukünftige saubere Lösung

Eine potenzielle zukünftige Lösung verwendet eine Webkit-Eigenschaft:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify; /* IE */
}

Diese Methode funktioniert in Firefox 12.0 und IE8, erfordert jedoch die Aktivierung experimenteller Funktionen in Webkit-Browsern. In Webkit-Version 39 wird diese Eigenschaft ohne die Erweiterung „-webkit-“ unterstützt, jedoch nur, wenn experimentelle Funktionen aktiviert sind.

Das obige ist der detaillierte Inhalt vonWie kann man Inline-Block-Elemente ohne zusätzlichen vertikalen Platz richtig ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!