“Text-align: justifier;” bloquer les éléments correctement?

Quelques autres questions ont déjà porté sur la meilleure façon d’appliquer text-align: justify que les éléments inline-block s’étalent uniformément, par exemple, comment puis-je vraiment justifier un menu horizontal en HTML + CSS?

Cependant, l’élément de largeur à 100% qui “efface” la ligne des éléments de bloc en ligne reçoit sa propre ligne par le navigateur. Je ne peux pas comprendre comment se débarrasser de cet espace vertical vide sans utiliser la line-height: 0; sur l’élément parent.

Pour un exemple du problème, voir ce violon

Pour ma solution qui utilise line-height: 0; , voir ce violon

La solution que j’utilise exige qu’une nouvelle line-height soit appliquée aux éléments enfants, mais toute line-height précédemment définie est perdue. Est-ce que quelqu’un est au courant d’une meilleure solution? Je veux éviter les tables pour que les éléments puissent envelopper si nécessaire, et aussi flexbox car la prise en charge du navigateur n’est pas encore là. Je veux aussi éviter les flottants car le nombre d’éléments espacés sera arbitraire.

Mise à jour des informations de la solution “Future” ci-dessous; pas encore totalement pris en charge.

Contournement actuel (IE8 +, FF, Chrome Testé)

Voir ce violon

CSS pertinent

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

Explication

L’ display: block sur l’élément :before avec la marge inférieure négative tire les lignes de texte vers le haut d’une ligne, ce qui élimine la ligne supplémentaire, mais déplace le texte. Ensuite, avec la position: relative aux éléments en ligne, le déplacement est neutralisé, mais sans rappend la ligne supplémentaire.

Bien que css ne puisse pas accéder directement à une “unité” de line-height , l’utilisation de em dans les parameters margin-bottom et top adapte facilement toute line-height donnée comme l’une des valeurs de multiplicateur . Donc, 1.2 , 120% ou 1.2em sont tous égaux dans le calcul par rapport à la line-height de la line-height , ce qui rend l’utilisation de em un bon choix ici, car même si line-height: 1.2 est défini, alors 1.2em pour margin-bottom et top correspondra. Un bon codage pour normaliser l’apparence d’un site signifie que la hauteur de line-height doit être définie explicitement à un certain point, donc si l’une des méthodes de multiplicateur est utilisée, l’unité em équivalente donnera la même valeur que la line-height . Et si la line-height est définie sur une longueur non- em , telle que px , elle pourrait plutôt être définie.

Avoir définitivement une variable ou un mixin en utilisant un préprocesseur CSS tel que LESS ou SCSS pourrait aider à garder ces valeurs correspondant à la line-height appropriée, ou javascript pourrait être utilisé pour lire de manière dynamic, mais en réalité, la line-height devrait être connue dans le contexte de l’endroit où il est utilisé, et les parameters appropriés ici faites.

MISE À JOUR pour le texte minifié (pas d’espaces)

Le commentaire de Kubi a noté qu’une minification du code HTML qui supprime les espaces entre les éléments provoque l’échec de la justification . Un pseudo-espace dans la balise n’aide pas (mais cela est attendu, car l’espace se produit à l’intérieur de l’élément inline-block ), un ajouté entre les balises n’aide pas (probablement parce qu’un la rupture n’est pas nécessaire à la ligne suivante), donc si la minification est souhaitée, alors la solution est un caractère d’espace insécable   codé en dur   – les autres caractères spatiaux tels que l’ espace réduit et l’ espace ne fonctionnaient pas (de manière surprenante).

Une solution propre pour l’avenir

Une solution dans laquelle webkit était en retard (dès la première écriture) était:

 .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 */ } 

Cela fonctionne dans FF 12.0+ et IE8 + (buggy dans IE7).

Pour Webkit, à partir de la version 39 (du moins, peut-être s’est-il glissé plus tôt), il le supporte sans l’extension -webkit- mais seulement si l’ utilisateur a activé les fonctionnalités expérimentales (ce qui peut être fait avec chrome://flags/#enable-experimental-web-platform-features ). La rumeur est que la version 41 ou 42 devrait voir un support complet. Comme il n’est pas encore compatible avec webkit , il ne s’agit que d’une solution partielle . Cependant, je pensais que je devrais le poster car cela peut être utile pour certains.

Considérer ce qui suit:

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

(Voir aussi le violon édité .) Est-ce ce que vous cherchez? L’avantage de cette technique est que vous pouvez append plus d’éléments et qu’ils seront tous centrés automatiquement. Pris en charge par tous les navigateurs Web modernes.

Tout d’abord, j’apprécie l’approche du pseudo-element pour garder la balise sémantique. Je pense que vous devriez vous en tenir à l’approche globale. C’est bien mieux que de recourir aux tables, au balisage inutile ou aux scripts supérieurs pour saisir les données de positionnement.

Pour tous ceux qui sont stressés par l’ text-align sur le fait d’être pirate – vas-y! Il est préférable que le HTML soit sémantique au désortingment du CSS que l’inverse.

Donc, d’après ce que je comprends, vous essayez d’obtenir cet effet de blocage en ligne justifié sans avoir à vous soucier de réinitialiser la line-height chaque fois correctement? Je soutiens que vous ajoutez simplement

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

Ensuite, vous pouvez continuer à coder comme si rien ne s’était passé. Voici la citation de Paul Irish à propos du sélecteur * si vous êtes préoccupé par la performance:

“… vous n’êtes pas autorisé à vous soucier des performances de * sauf si vous concaténez tous vos javascript, si vous les avez en bas, réduisez vos css et js, gzipez tous vos actifs et compressez sans perte toutes vos images. Si vous ne le faites pas Pour obtenir plus de 90 scores de vitesse de la page, il est beaucoup trop tôt pour penser à l’optimisation du sélecteur. ”

J’espère que cela t’aides!

-J Cole Morrison

Tenter d’ text-align du text-align pour ce problème est assez compliqué. La propriété text-align est destinée à aligner le contenu en ligne d’un bloc (en particulier le texte) – il n’est pas destiné à aligner les éléments HTML.

Je comprends que vous essayez d’éviter les flotteurs, mais à mon avis, les flotteurs sont le meilleur moyen d’accomplir ce que vous essayez de faire.

Dans votre exemple, vous avez une line-height:1.2 , sans unité. Cela peut causer des problèmes. Si vous n’utilisez pas de bordures, vous pourriez donner au parent et aux enfants une line-height de line-height de 0 .

Les autres options auxquelles je peux penser sont:

  1. Utilisez display:table sur le parent et display:table-cell sur les enfants pour simuler un comportement similaire à celui d’une table. Et vous alignez le premier object à gauche et le dernier à droite. Voir ce violon
  2. Utilisez javascript pour faire un compte des enfants nav et leur donner une largeur également répartie. par exemple. 4 enfants, 25% de width chacun. Et alignez les premier et dernier éléments respectivement à gauche et à droite.
  3. Il existe un moyen de dissortingbuer uniformément les éléments, mais c’est une méthode alambiquée qui nécessite de placer avec précaution dans le fichier HTML des espaces non séparables avec une marge négative et un text-align:justify . Vous pouvez essayer de l’adapter à l’élément nav . Voir exemple ici .

Votre violon est terriblement spécifique. Il me semble que pour votre cas ce CSS fonctionnerait bien:

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

Comme indiqué par @Scotts, ce qui suit a été implémenté dans Chrome, sans la partie -webkit , que j’ai vraiment aimé btw, d’autant plus que nous avons besoin de nous débarrasser -browser-specific-shǐt .

 .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 */ } 

Note: Bien que Safari et Opera ne le supportent pas encore (08-SEPT-16).

Je pense que le meilleur moyen serait de créer l’élément clickable avec une class / un id spécifique, puis d’atsortingbuer float:left ou float:right conséquence. J’espère que cela pourra aider.