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

发布于 2025-01-02 21:28:49 字数 735 浏览 0 评论 0原文

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

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

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

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

编辑：

我忘了提到我必须使用

原文

I have a dynamically generated menu, which resides in resizable container. There are 4 requirements that I have to comply:

Items must form a horizontally centered menu.
They have to wrap into n amount of rows and remain aligned.
It must be an <ul></ul> list.
It must work with IE7+

Example:

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

Now, when container has shrunk down, itmes must form the following:

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

The < and > signs represent container bounds.

How would I do that in HTML/CSS? Thanks in advance.

EDIT:

I forgot to mention that I have to use <ul> and make it work under IE7+.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贱贱哒 2025-01-09 21:28:49

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/

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;
}

Fiddle: http://jsfiddle.net/eqpGv/2/

回复收藏 0 原文