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

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

Linda Hamilton
Libérer: 2024-11-27 19:35:15
original
1019 Les gens l'ont consulté

How Can I Evenly Distribute Inline-Block Elements with `text-align: justify`?

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

}

Copier après la connexion

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 :

1

2

3

4

.prevNext {

    text-align: justify;

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

}

Copier après la connexion

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!

source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal