Maison > interface Web > tutoriel CSS > Comment puis-je éliminer les espaces indésirables entre les éléments de la liste de blocage en ligne ?

Comment puis-je éliminer les espaces indésirables entre les éléments de la liste de blocage en ligne ?

Linda Hamilton
Libérer: 2024-12-17 21:26:15
original
574 Les gens l'ont consulté

How Can I Eliminate Unwanted Spaces Between Inline-Block List Items?

Espaces dans les éléments de la liste de blocage en ligne résolus

Les éléments de la liste de blocage en ligne présentent souvent des espaces indésirables entre eux. Ce problème se pose en raison de la nature dépendante des espaces des éléments de bloc en ligne et des paramètres d'espacement de la police.

Pour résoudre ce problème, envisagez les mesures suivantes :

  • Bloquer ensemble : Fusionnez les éléments de votre liste en une seule ligne pour un espacement optimal.
  • Rejoignez Balises : Enroulez les balises des éléments de la liste ensemble, en éliminant l'espace entre chaque élément :
<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>
Copier après la connexion

Vous pouvez également éliminer les espaces en définissant la taille de police de l'élément parent sur 0 :

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}
Copier après la connexion

Cette méthode réinitialise l'espacement des polices pour l'élément parent et l'ajuste séparément pour le contenu de l'élément de liste individuel.

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