浮动项目的多行水平居中列表

Question

我有一个动态生成的菜单，它位于可调整大小的容器中。我必须遵守 4 个要求：

1. 项目必须形成水平居中的菜单。
2. 它们必须包装成 n 行并保持对齐。
3. 必须是<ul></ul> 列表。
4. 必须支持 IE7+

例子：

>          Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7         <

现在，当容器缩小时，items 必须形成以下形式：

                  > Item 1 | Item 2 | Item 3 | Item 4  <
                  >     | Item 5 | Item 6 | Item 7     <

< 和 > 符号表示容器边界。

我将如何在 HTML/CSS 中做到这一点？提前致谢。

编辑：

我忘了说我必须使用<ul> 并使其在 IE7+ 下工作。

Answer 1

HTML：

<ul id="container">
    <li class="item">Item1</li>
    <li class="item">Item2</li>
    <li class="item">Item3</li>
    <li class="item">Item4</li>
    <li class="item">Item5</li>
    <li class="item">Item6</li>
    <li class="item">Item7</li>
</ul>

CSS：

#container {
    text-align: center;
    padding: 10px;
}

.item {
    display: inline-block;
    margin: 0 8px;
    /* for ie7 */
    zoom: 1;
    *display: inline;
}

小提琴：http://jsfiddle.net/eqpGv/2/

Answer 2

@亚历山大

只需将 div 的宽度设置为您喜欢的最大尺寸，将样式“text-align”应用于 div 类并将其设置为“center”，因为您的 shell div 垂直增长，项目将环绕并居中对齐。