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

Posted 2023-03-05

【中文标题】浮动项目的多行水平居中列表

【英文标题】：Multi-row horizontally centered list of floated items

【发布时间】：2012-02-27 11:44:56

【问题描述】：

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

项目必须形成水平居中的菜单。 它们必须包装成 n 行并保持对齐。 必须是<ul></ul> 列表。 必须支持 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+ 下工作。

【参考方案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/

【讨论】：

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

容器真的没关系，css也一样，不过我更新了代码和fiddle变成了无序列表。

为新的 ie7 要求添加了骇客。

【参考方案2】：

@亚历山大

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

【讨论】：

孩子<li>物品呢？他们必须是什么显示类型，内联？我也必须让它在 IE 7 中工作。我忘了提一下，这个列表必须是<ul>。我会进行编辑。