Comment éliminer l'espace vertical supplémentaire sous les éléments de bloc en ligne justifiés ?

Comment justifier correctement "text-align: justifier;" Éléments de bloc en ligne

Alors que les discussions précédentes ont exploré des méthodes efficaces pour répartir uniformément les éléments de bloc en ligne à l'aide de « text-align : justifier », un problème persistant demeure : l'espace vertical indésirable sous la dernière ligne de éléments.

Solution de contournement actuelle

Ce problème peut être résolu en utilisant les CSS et HTML suivants structure:

HTML:

<div class="prevNext">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

Explication:

L'élément :before avec une marge inférieure négative soulève les lignes de texte, éliminant ainsi l'espace supplémentaire. Le positionnement relatif sur les éléments du bloc en ligne neutralise ce décalage sans ajouter de ligne supplémentaire. Les unités em garantissent que les marges s'alignent quelle que soit la hauteur de ligne utilisée.

Solution future

Une solution dans un futur proche implique l'utilisation de la propriété text-align-last :

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

Cela élimine le besoin d'astuces CSS supplémentaires, mais nécessite actuellement l'activation de fonctionnalités expérimentales dans Webkit navigateurs.

Gestion du problème de texte minifié

Si la minification supprime les espaces entre les éléments de bloc en ligne, ajoutez un espace insécable ( ) entre les balises d'ancrage.

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!