Centre une boîte de largeur dynamique

Question

Pseudo HTML

<div> 
<ul> 
    <li>Nav 1</li> 
    <li>Nav 2</li> 
</ul> 
</div> 

Je veux que cela ressemble

[DIV---------------[UL nav1 nav2]----------------------]

Au lieu de cela je reçois

[DIV[UL nav1 nav2-----------padding-------------------]]

Les années li sont gauche flottaient. Le ul a débordement: auto. Comment puis-je obtenir l'ul pour être aussi large que nécessaire, pas aussi large que possible, alors je le centre avec une marge automatique?

Answer 1

En utilisant display: inline-block avec IE pirater:

zoom: 1; 
display: inline;

Answer 2

Essayez:

div { text-align: center; } 
ul { display: inline; } 

Vous pouvez également essayer d'ajouter:

li { display: inline; } 

Answer 3

Dans ce cas, régler la hauteur sur la div ET Li, mais les faire en ligne, comme le dit M. Cletus.

Ou abandonner et utiliser un <table>, bien que cela va faire frapper la police css à votre porte à 3 heures du matin.

Dans l'ancien temps, nous venions d'utiliser <table> et <img> et nous ne savions pas que c'était faux. Comme fumer dans les années 1970, ou écouter Rick Astley dans les années 1980. Nous l'avons tous fait, et nous le faisons encore une fois de temps en temps quand nous pensons que personne ne nous fait passer par un validateur.