"text-align : justify ;" éléments inline-block correctement ?

Question

Quelques autres questions ont déjà abordé la meilleure façon de s'appliquer text-align: justify pour que les éléments inline-block s'étalent uniformément par exemple, Comment justifier *vraiment* un menu horizontal en HTML+CSS ?

Toutefois, l'élément de largeur 100 % qui "efface" la ligne d'éléments inline-block se voit attribuer sa propre ligne par le navigateur. Je n'arrive pas à trouver comment faire disparaître cet espace vertical vide sans utiliser la fonction 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 s'applique aux éléments enfants, mais toute valeur précédemment définie dans le cadre de l'option line-height est perdue. Quelqu'un connaît-il une meilleure solution ? Je veux éviter les tableaux pour que les éléments puissent s'enrouler lorsque c'est nécessaire, et aussi le flexbox parce que le navigateur ne le supporte pas encore. Je veux également éviter les flottants, car le nombre d'éléments espacés sera arbitraire.

Answer 1

Solution actuelle (IE8+, FF, Chrome testés)

Voyez 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

Le site display: block sur le :before avec la marge inférieure négative fait remonter les lignes de texte d'une hauteur de ligne, ce qui élimine la ligne supplémentaire, mais déplace le texte. Ensuite, avec l'élément position: relative sur le inline-block éléments, le déplacement est neutralisé, mais sans rajouter la ligne supplémentaire.

Bien que css ne puisse pas accéder directement à un line-height "unité" en soi, l'utilisation de em dans le margin-bottom et top s'adapte facilement à tout type de line-height donné comme l'un des valeurs du multiplicateur . Donc 1.2 , 120% ou 1.2em sont tous égal en calcul par rapport à line-height qui fait appel à l'utilisation de em un bon choix ici, car même si line-height: 1.2 est fixé, alors 1.2em pour margin-bottom et top correspondra. Un bon codage pour normaliser l'apparence d'un site signifie qu'à un moment donné line-height doit être défini explicitement, donc si l'une des méthodes de multiplicateur est utilisée, alors l'équivalent em donnera la même valeur que l'unité line-height . Et si line-height est fixé à un non em longueur, comme px que l'on pourrait mettre à la place.

Il est certain qu'une variable ou un mixin utilisant un préprocesseur css tel que LESS ou SCSS pourrait aider à faire correspondre ces valeurs aux valeurs appropriées. line-height ou un javascript pourrait être utilisé pour lire dynamiquement ces données, mais en réalité, l'option line-height doit être connu dans le contexte de son utilisation et les réglages appropriés doivent être effectués.

MISE À JOUR pour le problème du texte minifié (sans espaces)

Dans le commentaire de Kubi, il est indiqué qu'une minification du html qui supprime les espaces entre les caractères <a> éléments fait échouer la justification . A pseudo-espace dans le <a> n'aide pas (mais c'est normal, car l'espace se déroule à l'intérieur de la zone de l'entreprise). inline-block elmeent), un <wbr> ajouté entre les <a> Les tags n'aident pas (probablement parce qu'il n'est pas nécessaire de faire une pause jusqu'à la ligne suivante), donc si la minification est souhaitée, alors la solution est un caractère d'espace insécable codé en dur.   --autres caractères d'espacement comme espace réduit et en espace n'a pas fonctionné (étonnamment).

Solution propre future possible

Une solution dans laquelle webkit est en retard sur son temps (au moment où j'écris ces lignes) est :

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

qui fonctionne dans FF 12.0+ et IE8+. (bogué dans IE7). Parce qu'il n'est pas supporté par webkit encore, il ne s'agit en fait que d'une solution partielle . Cependant, j'ai pensé que je devais le poster car il peut être utile à certains.

Answer 2

Considérez ce qui suit :

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

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

(Voir aussi le violon édité .) Est-ce que c'est ce que vous recherchez ? L'avantage de cette technique est que vous pouvez ajouter d'autres éléments et qu'ils seront tous centrés automatiquement. Prise en charge par tous les navigateurs Web modernes.

Answer 3

Tout d'abord, j'aime l'approche de la pseudo-element afin de conserver la sémantique du balisage. Je pense que vous devriez vous en tenir à l'approche globale. C'est bien mieux que de recourir à des tableaux, à des balises inutiles ou à des scripts excessifs pour récupérer les données de positionnement.

Pour tous ceux qui sont stressés par text-align faire du bricolage - allez ! Il vaut mieux que le html soit sémantique au détriment du CSS que l'inverse.

Donc, si je comprends bien, vous essayez d'obtenir cet effet inline-block justifié sans avoir à vous soucier de la réinitialisation de l'indicateur d'accès à l'information. line-height à chaque fois, n'est-ce pas ? Je soutiens que vous ajoutez simplement

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

Ensuite, vous pouvez continuer à coder comme si de rien n'était. Voici la citation de Paul Irish à propos de la * si vous êtes préoccupé par les performances :

"...vous n'êtes pas autorisé à vous soucier des performances de * à moins que vous concaténiez tout votre javascript, que vous le mettiez en bas, que vous réduisiez vos css et js, que vous compressiez tous vos actifs et que vous compressiez sans perte toutes vos images. Si vous n'obtenez pas des scores de vitesse de page de 90+, il est beaucoup trop tôt pour penser à l'optimisation des sélecteurs."

J'espère que cela vous aidera !

-J Cole Morrison

Answer 4

Tenter de text-align pour ce problème est plutôt bidon. Le site text-align est destinée à aligner le contenu en ligne d'un bloc (spécifiquement le texte) - elle n'est pas destinée à 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.

Answer 5

Dans votre exemple, vous avez line-height:1.2 sans unité. Cela peut poser des problèmes. Si vous n'utilisez pas de bordures, vous pouvez donner au parent et aux enfants un symbole line-height de 0 .

Les autres options auxquelles je pense sont :

1. Utilisez display:table sur le parent et display:table-cell sur les enfants pour simuler un comportement de table. Et vous alignez le premier élément à gauche, et le dernier à droite. Voir ce qui suit violon .
2. Utilisez le javascript pour compter les enfants du nav et leur donner une largeur égale, par exemple 4 enfants, 25 %. width chacun. Et alignez le premier et le dernier élément respectivement à gauche et à droite.
3. Il existe un moyen de répartir uniformément les éléments, mais il s'agit d'une méthode alambiquée qui nécessite de placer soigneusement dans le code html des espaces non cassables, ainsi qu'une marge négative et une marge de sécurité. text-align:justify . Vous pourriez essayer de l'adapter à la nav élément. Voir l'exemple ici .