Maison > interface Web > tutoriel CSS > Comment puis-je justifier les éléments de bloc en ligne sans espacement indésirable ?

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

DDD
Libérer: 2024-11-28 09:04:12
original
932 Les gens l'ont consulté

How Can I Justify Inline-Block Elements Without Unwanted Spacing?

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%;
}
Copier après la connexion

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 */
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal