CSS horizontal menu - equally spaced?

Question

Hi all,

I guess this is a common question but haven't found any good answer about it, and questions around here are not exactly my case. Also, this is my first question so please don't be too harsh on me. lol

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? Thanks in advance!

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.

Answer 1

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.

Answer 2

If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx" attribute to the lis (or in <style> at the top... or where ever you please, really). Where xx should either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.

Answer 3

#menu ul {
display: block;
width: 100%;
}

#menu ul li {
display: inline;
width: /* if you're creating the buttons/items dynamically you should be able to use some form of math, essentially number-of-items/100 = percent */
}

The width of the #menu ul li can be set either in the head of the page (<style type="text/css" media="all">...</style>) or inline on the elements themselves. But dynamic shouldn't be a problem.

Answer 4

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;