Maison > interface Web > tutoriel CSS > Comment centrer une liste non ordonnée de largeur inconnue en CSS ?

Comment centrer une liste non ordonnée de largeur inconnue en CSS ?

Susan Sarandon
Libérer: 2024-10-31 00:37:29
original
241 Les gens l'ont consulté

How to Center an Unordered List of Unknown Width in CSS?

Centrage d'une liste non ordonnée de largeur inconnue

Dans la conception Web, il est courant d'avoir une liste non ordonnée de liens dans un pied de page pour faciliter la navigation. Cependant, si la largeur de la liste est inconnue, il peut être difficile de centrer horizontalement les éléments de la liste.

Une solution pour les listes où les éléments peuvent être affichés en ligne est :

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>
Copier après la connexion

Cela applique le centre d'alignement du texte au pied de page, supprime le style de liste par défaut et définit les éléments de la liste à afficher en tant qu'éléments en ligne.

Cependant, dans les cas où les éléments de la liste doivent être affichés sous forme de blocs, le code CSS suivant peut être utilisé :

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>
Copier après la connexion

Cette approche définit le pied de page sur toute la largeur et masque tout débordement. La liste non ordonnée est positionnée de manière absolue, flotte vers la gauche, puis décalée de 50 % vers la gauche. Les éléments de la liste sont également positionnés de manière absolue, flottant vers la gauche et décalés de 50 % vers la droite. Cela centre efficacement la liste non ordonnée horizontalement, quelle que soit sa largeur.

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