Wie kann ich Inline-Block-Elemente ohne zusätzliche Zeilenumbrüche richtig ausrichten?

Können Inline-Block-Elemente ordnungsgemäß mit „text-align: justify;“ ausgerichtet werden?

In früheren Diskussionen wurde untersucht, wie man „text-align: justify;“ anwendet. text-align: justify“, um Inline-Block-Elemente gleichmäßig zu verteilen. Bei Verwendung dieser Technik wird jedoch am Ende der Zeile der ausgerichteten Elemente ein Zeilenumbruch erstellt.

Aktuelle Problemumgehung

Um diesen zusätzlichen vertikalen Abstand zu beseitigen, a Die Problemumgehung besteht darin, einen negativen Rand für ein „Element vor“ zu verwenden, während „Position: relativ“ auf die Inline-Block-Elemente angewendet wird. Diese Kombination verschiebt die Textzeilen nach oben und entfernt die zusätzliche Zeile.

.prevNext {
    text-align: justify;
}

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

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

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

Zukünftige Lösung

Zukünftig die Eigenschaft „text-align-last“. , das in Firefox und Internet Explorer unterstützt wird, könnte eine einfachere Lösung bieten. Derzeit ist es jedoch nicht vollständig in Webkit implementiert.

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

Mit dieser Eigenschaft kann die letzte Zeile von Inline-Block-Elementen gerechtfertigt werden, sodass keine Problemumgehung erforderlich ist.

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