Comment puis-je justifier correctement les éléments de bloc en ligne sans sauts de ligne supplémentaires ?

Les éléments de bloc en ligne peuvent-ils être correctement alignés avec "text-align: justifier;" ?

Des discussions précédentes ont exploré comment appliquer " text-align: justifier" pour répartir uniformément les éléments de bloc en ligne. Cependant, lors de l'utilisation de cette technique, un saut de ligne est créé à la fin de la ligne d'éléments justifiés.

Solution de contournement actuelle

Pour éliminer cet espace vertical supplémentaire, un La solution de contournement consiste à utiliser une marge négative sur un « élément avant » tout en appliquant « position : relative » aux éléments du bloc en ligne. Cette combinaison décale les lignes de texte vers le haut, supprimant la ligne supplémentaire.

.prevNext {
    text-align: justify;
}

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

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

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

Solution future

À l'avenir, la propriété "text-align-last" , pris en charge dans Firefox et Internet Explorer, pourrait fournir une solution plus simple. Cependant, elle n'est actuellement pas entièrement implémentée dans Webkit.

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

Cette propriété permet de justifier la dernière ligne des éléments de bloc en ligne, éliminant ainsi le besoin de solution de contournement.

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!