Wie kann ich Inline-Block-Elemente ohne unerwünschte Abstände ausrichten?

Ausrichten von Inline-Elementen mit „text-align: justify“

Trotz früherer Versuche, Inline-Block-Elemente mit „text-align: justify“ gleichmäßig auszurichten, ist ein hartnäckiges Problem aufgetreten Es tritt ein Problem auf: Der Browser fügt nach dem 100 % breiten Element einen leeren vertikalen Raum hinzu, der die Zeile des Inline-Blocks löscht Elemente.

Auf der Suche nach einer Lösung ohne Verwendung von line-height: 0, die den Leerraum eliminiert, aber die ursprüngliche Zeilenhöhe verwirft, untersuchen wir mögliche Alternativen.

Aktueller Workaround (IE8 , FF, Chrome getestet)

(Siehe Geige: https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

Erklärung:

Diese Problemumgehung verwendet ein :before-Pseudoelement mit einem negativen unteren Rand, um den Text nach oben zu verschieben und so die zusätzliche Zeile zu eliminieren. Die Inline-Block-Elemente werden dann mit der Position: relativ angepasst, um diese Verschiebung auszugleichen.

Zukünftige Lösung

Eine vielversprechende Lösung, die auf volle Unterstützung wartet, ist die Verwendung von „ text-align-last: justify“, das Inline-Elemente ausrichtet, ohne dass Workarounds erforderlich sind. Allerdings erfordert es derzeit die Aktivierung experimenteller Funktionen in Webkit-Browsern, was die Zugänglichkeit einschränkt.

(Siehe Geige: https://jsfiddle.net/jasperdeGroot/c3r4w/)

CSS:

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

Hinweis: Diese Lösung kann nicht für alle Browser geeignet sein, bis die vollständige Unterstützung implementiert ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline-Block-Elemente ohne unerwünschte Abstände ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!