Centre menu style de liste horizontale

Question

je le code suivant:

CSS

#main 
{ 
    width:100%; 
    height:120px; 
    border:solid 1px #efefef; 
} 

#links 
{ 
    background-color:#808080; 
} 

#links ul 
{ 
    margin:0px auto; 
    padding:0px; 
    list-style:none; 
    background-color:#eee; 
    height:30px; 
} 

#links ul li 
{ 
    float:left; 
    margin:0px; 
    list-style:none; 
    padding:0px 10px; 
} 

HTML

<div id="main"> 
    <div id="links"> 
     <ul> 
      <li>Link 1</li> 
      <li>Link 2</li> 
      <li>Link 3</li> 
      <li>Link 4</li> 
      <li>Link 5</li> 
      <li>Link 6</li> 
     </ul>  
    </div> 
</div> 

Les éléments de liste sont dynamiques donc je ne peux pas vraiment utiliser largeur fixe sur la couche #links et je veux que la liste soit parfaitement centrée. Le code ci-dessus ne fonctionne pas et j'ai une variété de méthodes, mais ne semble pas centrer la liste.

Je ne veux pas utiliser une table en partie parce que je déteste utiliser des tables pour les menus et aussi j'aurai éventuellement des sous-menus qui seront également horizontaux.

Des pointeurs?

Merci Steve

Answer 1

Voici les solutions possibles:

• Centre widthless floats
• Centering Float Left Menus

Answer 2

Ajouter:

text-align:center; 

À #links

#links ul définit les marges gauche et droite sur auto. Ce qui les rendra de taille égale si l'on dit au conteneur de centrer son contenu. La ligne ci-dessus fera cela.

Answer 3

Voici quelque chose que j'ai écrit qui pourrait faire ce que vous voulez. Utilise jQuery bien. Evenly spaced and justified horizontal list menu

Answer 4

Un petit détail de style pour répondre Safraz (merci qui a travaillé pour moi aussi!)

Quand je tournerai à gauche: 50% de la ul, et à gauche: -50% des articles li. Le navigateur affiche une barre de défilement horizontale, bien qu'il n'y ait rien à voir (la barre de défilement est là à cause du débordement produit par l'UL avec 50% de gauche), donc la solution est d'ajouter à la div de wrapping (dans ce cas = liens) ce style:

CSS

#links 
{ 
    /* .... */ 
    overflow-x: hidden ; 
} 

Answer 5

Marge 0 auto ne fonctionne que lorsque vous donnez une largeur! vous devez utiliser le bloc en ligne, puis le centre d'alignement de texte

ul { 
    text-align: center;   
} 
ul > li { 
    display: inline-block; 
}