Search code examples
liststylesheetspacingcss

CSS horizontal menu - equally spaced?

I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.

I've seen solutions using JavaScript to set those values but I would really love to avoid them.

Lastly, I've seen a pretty good solution which is setting

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

This will create the desired behavior in most browsers... except for IE.

Any ideas?

EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.

Solution

  • You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width

    Try display:inline-block;

    here is the fix for ie:

    display:inline-block;
zoom:1;
*display:inline;