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

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

DDD
Libérer: 2024-11-04 02:37:29
original
643 Les gens l'ont consulté

How to Center an Unordered List of Unknown Width?

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

Dans la conception Web, il est souvent souhaitable de centrer horizontalement une liste de liens, tels que ceux trouvés dans les pieds de page. Bien que l'alignement du texte soit simple, centrer une liste non ordonnée sans spécifier sa largeur peut être délicat.

Question :

Comment centrer horizontalement une liste non ordonnée de largeur inconnue, où les éléments de la liste doivent être affichés côte à côte, et non les uns en dessous des autres ?

Réponse :

Option 1 : affichage en ligne

Si les éléments de la liste peuvent être configurés pour s'afficher : en ligne, la solution est simple :

<code class="css">#footer {
  text-align: center;
}

#footer ul {
  list-style: none;
}

#footer ul li {
  display: inline;
}</code>
Copier après la connexion

Option 2 : Bloquer l'affichage avec positionnement

Si display : le bloc doit être utilisé pour les éléments de la liste, considérez le CSS suivant :

<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

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