Как вывести родительский элемент с плавающими дочерними элементами в центр документа?

Question

Я организовал меню. Его HTML выглядит следующим образом:

   <ul class="topmenu">
          <li><a href="sample.html">Text 1</a></li>
          <li><a href="sample.html">Text 2</a></li>
          <li><a href="sample.html">Text 3</a></li>
          <li><a href="sample.html">Text 4</a></li>
   <ul>

Это горизонтальное меню, поэтому я переместил элементы списка влево, чтобы отобразить их в горизонтальной линии. Я мог бы использовать display: inline, чтобы отобразить их в одной строке, но поскольку IE не поддерживает его, и я не знаю другого способа сделать это, я использовал float: left;.

Это CSS это:

.topmenu {
    list-style:none;
    margin:0;
    padding:0;
}
.topmenu li {
    float:left;
} 

Это приводит меню в идеальную горизонтальную линию, но весь список перемещается влево. Я хочу, чтобы .topmenu появилось в центре документа и удерживал элемент списка внутри него всплывающим влево.

Я обнаружил, что это достижимо путем определения свойства width в .topmenu, но я не хочу фиксировать его ширину, поскольку элементы списка генерируются динамически и, следовательно, могут увеличиваться и уменьшаться.

Кто-нибудь знает какое-нибудь решение?

Answer 1

Вот решение без использования ширины:)

Answer 2

display: inline отлично поддерживается всеми версиями IE. Это inline-block, которое не полностью поддерживается в IE 6 и 7 ( source ).

Это должно быть решено простым переключением на display: inline.