Comment puis-je répartir uniformément les éléments de bloc en ligne avec « text-align : justifier » ?

Les éléments de bloc en ligne peuvent-ils être répartis uniformément ?

Problème :

Éléments de blocs en ligne avec alignement du texte : justifient la difficulté à distribuer le contenu uniformément, en laissant un espace vertical vide au bas de la ligne. Les solutions traditionnelles impliquent l'utilisation de line-height: 0; sur l'élément parent, ce qui peut perturber les valeurs de hauteur de ligne existantes.

Solution de contournement pour les navigateurs actuels (IE8, FF, Chrome) :

Cette méthode CSS résout le problème sans perturber les hauteurs de ligne :

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

L'élément :before tire les lignes de texte d'une hauteur de ligne, éliminant la ligne supplémentaire mais déplacement du texte. Le positionnement relatif des éléments de bloc en ligne neutralise ce déplacement sans ajouter de ligne supplémentaire.

Solution future avec "-text-align-last: justifier;" (Support proche) :

Une solution future plus propre utilise :

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

Support Webkit en cours :

Les navigateurs Webkit sont partiellement prend en charge cette solution mais nécessite l’activation de fonctionnalités expérimentales. Un support complet est attendu dans les versions à venir.

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!