Question

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

1. Items must form a horizontally centered menu.
2. They have to wrap into n amount of rows and remain aligned.
3. It must be an <ul></ul> list.
4. 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+.

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

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