Центрировать динамический бокс ширины

Question

Псевдо HTML

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

Я хочу, чтобы это выглядело как

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

Вместо этого я получаю

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

Ли остаются плавающими. У ul переполнение: auto. Как я могу сделать так, чтобы ul был настолько широким, насколько это необходимо, а не настолько широким, как мог бы быть, поэтому я центрирую его с помощью автоматического поля?

Answer 1

В этом случае установите высоту в div и li, но сделайте их встроенными, как говорит мистер Клетус.

Или сдавайтесь и используйте <table>, хотя это заставит полицию css постучать в вашу дверь в 3 часа ночи.

В старые времена мы просто использовали <table> и <img> и не знали, что это неправильно. Как курение в 1970-х или слушание Рика Эстли в 1980-х. Мы все сделали это, и иногда делаем это, когда думаем, что никто не проводит нас через валидатор.

Answer 2

Попробуйте:

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

Вы также можете попробовать добавить:

li { display: inline; }

Answer 3

Использование display: inline-block с взломом IE:

zoom: 1;
display: inline;