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

Question

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

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

示例：

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

现在，当容器缩小时，项目必须形成以下内容：

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

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

在 HTML/CSS 中该怎么做呢？谢谢提前。

编辑：

我忘记提到我必须使用 <ul> 并使其在 IE7+ 下工作。

- Aleksandr Makov

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/

- steveax

---

谢谢！但我忘了说，它必须是一个ul列表。 - Aleksandr Makov

容器真的不重要，CSS也是一样的，但我更新了代码和fiddle，使其成为一个无序列表。 - steveax

为了满足新的ie7要求，添加了一些hackery。 - steveax

Answer 2

@Aleksandr

只需将 div 的宽度设置为您的最大首选大小，将样式 "text-align" 应用于 div 类并将其设置为 "center"，随着您的外壳 div 垂直增长，项目将自动换行并居中对齐。

- vero

---

子<li>项怎么办？它们的显示类型是内联的吗？我还要在IE 7中使其正常工作。而且我忘了提到，这个列表必须是<ul>。我会进行编辑。 - Aleksandr Makov