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

Question

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

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

例:

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

现在,当容器缩小时,itmes必须形成以下内容:

                  > 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/