Question

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

项目必须形成水平居中的菜单。
他们必须包裹 n 行的数量并保持对齐。
必须是<ul></ul>列表。
必须使用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/

Answer 2

@Aleksandr

只需将div的宽度设置为最大首选大小，将样式“text-align”应用于div类＆amp;将它设置为“中心”，当你的shell div垂直增长时，项目将包裹和放置对齐中心。

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

2 个答案: