Comment puis-je justifier les éléments de bloc en ligne sans espacement indésirable ?

Alignement des éléments en ligne avec « text-align : justifier »

Malgré les tentatives précédentes pour justifier uniformément les éléments de bloc en ligne à l'aide de « text-align : justifier », un problème persistant un problème se pose : le navigateur ajoute un espace vertical vide après l'élément 100% width qui efface la ligne du bloc en ligne éléments.

En recherchant une solution sans utiliser line-height: 0, qui élimine l'espace vide mais supprime la hauteur de ligne d'origine, nous explorons des alternatives potentielles.

Solution de contournement actuelle (IE8, FF, Chrome testé)

(Voir violon : https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS :

.prevNext {
    text-align: justify;
}

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

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

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

Explication :

Cette solution de contournement utilise un pseudo-élément :before avec une marge inférieure négative pour décaler le texte vers le haut, éliminant ainsi la ligne supplémentaire. Les éléments du bloc en ligne sont ensuite ajustés avec position : relative pour compenser ce déplacement.

Solution future

Une solution prometteuse qui attend un support complet est l'utilisation de " text-align-last: justifier", qui justifie les éléments en ligne sans avoir besoin de solutions de contournement. Cependant, il nécessite actuellement l'activation de fonctionnalités expérimentales dans les navigateurs Webkit, ce qui limite son accessibilité.

(Voir violon : https://jsfiddle.net/jasperdeGroot/c3r4w/)

CSS :

.prevNext {
    text-align: justify;
    text-align-last: justify; /* IE */
}

Remarque : Cette solution peut ne pas être adapté à tous les navigateurs jusqu'à ce qu'une prise en charge complète soit mise en œuvre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!