Wie kann ich Inline-Block-Elemente mit „text-align: justify' gleichmäßig verteilen?

Können sich „text-align: justify;“ Inline-Block-Elemente gleichmäßig verteilen?

Problem :

Inline-Block-Elemente mit text-align: rechtfertigen Schwierigkeiten, den Inhalt gleichmäßig zu verteilen und ein Leerzeichen zu hinterlassen vertikaler Abstand am unteren Rand der Zeile. Traditionelle Lösungen umfassen die Verwendung von line-height: 0; auf dem übergeordneten Element, was bestehende Zeilenhöhenwerte stören kann.

Workaround für aktuelle Browser (IE8, FF, Chrome):

Diese CSS-Methode löst das Problem ohne Unterbrechung der Zeilenhöhen:

.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%;
}

Das :before-Element zieht Textzeilen um eine Zeilenhöhe nach oben und eliminiert so die zusätzliche Zeile aber Text verdrängen. Die relative Positionierung von Inline-Block-Elementen wirkt dieser Verschiebung entgegen, ohne eine zusätzliche Zeile hinzuzufügen.

Zukünftige Lösung mit „-text-align-last: justify;“ (Kurz vor der Unterstützung):

Eine sauberere zukünftige Lösung verwendet:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

In Bearbeitung befindliche Webkit-Unterstützung:

Webkit-Browser teilweise unterstützen diese Lösung, erfordern jedoch die Aktivierung experimenteller Funktionen. Volle Unterstützung wird in kommenden Versionen erwartet.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline-Block-Elemente mit „text-align: justify' gleichmäßig verteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!