Comment éliminer l'indentation indésirable dans les listes enveloppées non ordonnées avec CSS ?

Suppression de l'indentation d'une liste non ordonnée avec CSS

Lorsque le texte d'une liste non ordonnée s'enroule, des retraits indésirables peuvent apparaître. Pour résoudre ce problème, essayez les étapes suivantes :

1. Supprimer l'indentation

Supprimez le remplissage par défaut et le retrait de style liste :

ul {
    padding: 0;
    list-style-type: none;  
}

2. Diminuer la hauteur de la ligne

Si nécessaire, réduisez la hauteur de la ligne en la définissant égale à la taille de la police, ou légèrement inférieure :

ul li {
    line-height: 1em;
}

3. Désactivez Float

Supprimez toutes les propriétés float appliquées aux éléments de liste, en vous assurant qu'ils affichent plutôt le bloc en ligne :

ul li {
    float: none;
    display: inline-block;
}

4. Ajuster la taille de la police

En guise d'étape finale, ajustez la taille de la police à l'apparence souhaitée.

Exemple

Considérez le code suivant :

<div>

#info {
    ...
}

#info ul {
    padding: 0;
    list-style-type: none;
}

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}

Cette combinaison de techniques devrait éliminer l'indentation des lignes enveloppées dans les listes non ordonnées, garantissant ainsi une apparence propre et professionnelle.

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!