webentwicklung-frage-antwort-db.com.de

"text-align: justify;" Inline-Block-Elemente richtig?

Einige andere Fragen haben sich bereits mit der Frage befasst, wie text-align: justify am besten angewendet werden kann, um Inline-Block-Elemente gleichmäßig zu verteilen. Zum Beispiel: Wie kann ich * wirklich * ein horizontales Menü in HTML + CSS rechtfertigen?

Das Element mit 100% Breite, das die Zeile der Inline-Block-Elemente "löscht", erhält jedoch vom Browser eine eigene Zeile. Ich kann nicht herausfinden, wie ich diesen leeren vertikalen Raum loswerden kann, ohne line-height: 0; für das übergeordnete Element zu verwenden.

Ein Beispiel für das Problem finden Sie unter Diese Geige

Für meine Lösung, die line-height: 0; verwendet, siehe diese Geige

Die von mir verwendete Lösung erfordert, dass ein neuer line-height auf die untergeordneten Elemente angewendet wird, ein zuvor festgelegter line-height jedoch verloren geht. Kennt jemand eine bessere Lösung? Ich möchte Tabellen vermeiden, damit die Elemente bei Bedarf umgebrochen werden können, und auch Flexbox, da die Browserunterstützung noch nicht vorhanden ist. Ich möchte auch Floats vermeiden, da die Anzahl der Elemente, die voneinander entfernt werden, willkürlich ist.

50
thirdender

Die folgenden Lösungsinformationen für die "Zukunft" wurden aktualisiert. noch nicht vollständig unterstützt.

Aktuelle Problemumgehung (IE8 +, FF, Chrome Getestet)

Siehe diese Geige.

Relevantes 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

Das display: block am :before -Element mit dem negativen unteren Rand zieht die Textzeilen um eine Zeilenhöhe nach oben, wodurch die zusätzliche Zeile entfernt wird, der Text jedoch verschoben wird. Dann wird mit dem position: relative auf den inline-block -Elementen der Verschiebung entgegengewirkt, jedoch ohne die zusätzliche Zeile wieder hinzuzufügen.

Obwohl css nicht direkt auf eine line-height "Unit" per se zugreifen kann, können durch die Verwendung von em in den margin-bottom und top Einstellungen problemlos alle line-height als eine angegeben werden der Multiplikatorwerte . Also 1.2, 120% oder 1.2em sind alle gleich in der Berechnung in Bezug auf line-height, was die Verwendung von em zu einer guten Wahl macht, da auch wenn line-height: 1.2 eingestellt ist, 1.2em für margin-bottom und top Wird zusammenpassen. Gute Codierung zur Normalisierung des Erscheinungsbilds einer Site bedeutet, dass an einem bestimmten Punkt line-height explizit definiert werden sollte. Wenn also eine der Multiplikatormethoden verwendet wird, gibt die entsprechende em -Einheit den gleichen Wert wie die line-height. Und wenn line-height auf eine Länge eingestellt ist, die nicht em ist, wie z. B. px, könnte dies stattdessen eingestellt werden.

Wenn Sie auf jeden Fall eine Variable oder ein Mixin mit einem CSS-Präprozessor wie LESS oder SCSS haben, kann dies dazu beitragen, dass diese Werte mit dem entsprechenden line-height übereinstimmen, oder JavaScript kann verwendet werden, um solche Werte dynamisch zu lesen. In Wirklichkeit sollte dies jedoch der line-height sein bekannt, in welchem ​​Kontext dies verwendet wird, und die entsprechenden Einstellungen hier vorgenommen.

UPDATE für minimiertes Textproblem (keine Leerzeichen)

Kubis Kommentar bemerkte, dass eine Verkleinerung des HTML-Codes, der die Leerzeichen zwischen den <a> -Elementen entfernt, dazu führt, dass die Begründung fehlschlägt . Ein Pseudo-Space innerhalb des <a> -Tags hilft nicht (aber das wird erwartet, da der Space innerhalb des inline-block -Elements passiert), ein <wbr>, das zwischen den <a> -Tags eingefügt wird, hilft nicht (wahrscheinlich, weil in der nächsten Zeile kein Umbruch erforderlich ist). Wenn also eine Minimierung gewünscht wird, dann Die Lösung ist ein hartcodiertes, nicht unterbrechendes Leerzeichen &nbsp; - andere Leerzeichen wie Leerzeichen und en space hat (überraschenderweise) nicht funktioniert.

Eine saubere Lösung für die Zukunft

Eine Lösung , in der webkit hinter den Zeiten (als das erste Mal geschrieben wurde) war:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

Es funktioniert in FF 12.0+ und IE8 + (fehlerhaft in IE7).

Für Webkit ab Version 39 (zumindest möglicherweise früher eingeschlichen) wird dies unterstützt ohne die -webkit- -Erweiterung, aber nur , wenn der Benutzer die aktiviert hat experimentelle Funktionen (können unter chrome://flags/#enable-experimental-web-platform-features durchgeführt werden). Es geht das Gerücht, dass Version 41 oder 42 die volle Unterstützung sehen sollte. Da es von webkit noch nicht nahtlos unterstützt wird, handelt es sich immer noch um eine Teillösung . Ich dachte jedoch, ich sollte es posten, da es für einige nützlich sein kann.

86
ScottS

Folgendes berücksichtigen:

.prevNext {
    display: table;
    width: 100%
}

.prevNext a {
    display: table-cell;
    text-align: center
}

(Siehe auch die editierte Geige .) Ist es das, wonach Sie suchen? Der Vorteil dieser Technik besteht darin, dass Sie weitere Elemente hinzufügen können, die automatisch zentriert werden. Wird von allen modernen Webbrowsern unterstützt.

7
ACJ

Zunächst einmal mag ich die Annäherung des pseudo-element, um das Markup semantisch zu halten. Ich denke, du solltest bei dem Gesamtansatz bleiben. Es ist weitaus besser, als auf Tabellen, unnötige Markierungen oder über die obersten Skripts zuzugreifen, um die Positionsdaten zu erfassen. 

Für alle, die über text-align gestresst waren, hacken - komm schon! Es ist besser, dass das HTML auf Kosten des CSS semantisch ist, als umgekehrt.

Nach meinem Verständnis versuchen Sie also, diesen gerechtfertigten Inline-Block-Effekt zu erzielen, ohne sich darum kümmern zu müssen, den line-height jedes Mal richtig zurückzusetzen. Ich behaupte, dass Sie einfach hinzufügen

.prevNext *{
    line-height: 1.2;  /* or normal */
}

Dann können Sie mit dem Programmieren beginnen, als ob nichts passiert wäre. Hier das Zitat von Paul Irish über die *-Auswahl, wenn Sie sich Sorgen um die Leistung machen:

"... Sie dürfen sich nicht um die Leistung von * kümmern, es sei denn, Sie verknüpfen Ihr Javascript, haben es unten, minimieren Ihre CSS und JS, gzip all Ihre Assets und komprimieren verlustfrei alle Ihre Bilder. Wenn Sie nicht ' Wenn Sie 90+ Page Speed-Ergebnisse erzielen, ist es viel zu früh, um über die Optimierung von Selektoren nachzudenken. "

Hoffe das hilft!

-J Cole Morrison

4
J Cole Morrison

Der Versuch, text-align für dieses Problem zu versuchen, ist ziemlich hackig. Die text-align-Eigenschaft soll den Inline-Inhalt eines Blocks (insbesondere Text) ausrichten - es ist nicht dazu gedacht, HTML-Elemente auszurichten.

Ich verstehe, dass Sie versuchen, Schwimmer zu vermeiden, aber meiner Meinung nach sind Schwimmer der beste Weg, um das zu erreichen, was Sie versuchen.

1

Wie von @Scotts festgestellt, wurde Folgendes in Chrome implementiert, ohne den -webkit-Teil, den ich übrigens wirklich geliebt habe, zumal wir den -browser-specific-shǐt wirklich bald loswerden müssen. 

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE + Chrome */
}

Hinweis: Obwohl immer noch Safari und Opera unterstützen Sie es noch nicht (08-SEPT-16).

0

Ihre Geige ist schrecklich spezifisch. Es scheint mir, dass dieses CSS für Ihren Fall gut funktionieren würde:

.prevNext {
    border: 1px solid #ccc;
    position: relative;
    height: 1.5em;
}

.prevNext a {
    display: block;
    position: absolute;
    top: 0;
}

.prevNext a:first-child {
    left: 0;
    text-align: left;
}
.prevNext a:last-child {
    right: 0;
    text-align: right;
}
​
0
artlung

In Ihrem Beispiel haben Sie line-height:1.2, ohne eine Einheit. Dies kann zu Problemen führen. Wenn Sie keine Ränder verwenden, können Sie dem übergeordneten Element und den untergeordneten Elementen einen line-height von 0 zuweisen.

Die anderen Optionen, die mir einfallen, sind:

  1. Verwenden Sie display:table für das übergeordnete Element und display:table-cell für die untergeordneten Elemente, um tabellenartiges Verhalten zu simulieren. Sie richten das erste Element nach links und das letzte nach rechts aus. Siehe diese Geige .
  2. Verwenden Sie Javascript, um die Nav-Kinder zu zählen und ihnen dann eine gleichmäßige Breite zu geben. z.B. 4 Kinder, jeweils 25% width. Richten Sie das erste und letzte Element links und rechts aus.
  3. Es gibt eine Möglichkeit, die Elemente gleichmäßig zu verteilen, aber es ist eine gewundene Methode, bei der einige nicht durchbrochene Leerzeichen mit einem negativen Rand und text-align:justify sorgfältig in die HTML eingefügt werden müssen. Sie können versuchen, das Element nav anzupassen. Siehe Beispiel hier .
0
Moin Zaman