如何将带有浮动子元素的父元素带到文档的中心？

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带到文档的中心，并使其中的listitem向左浮动。

我发现这可以通过定义.topmenu的width属性来实现，但是我不想修改它的宽度，因为list-items是动态生成的，因此可以增加和减少。

任何人都知道任何解决方案？

Answer 1

<强> Here is the solution without using width:)

Answer 2

所有版本的IE都支持

display: inline。在IE 6和7（source）中完全不支持inline-block。

只需切换到display: inline即可解决此问题。