CSS horizontal menu - equally spaced?

list stylesheet spacing css
Alpha picture Alpha · Jul 30, 2009 · Viewed 38.9k times · Source

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.

Answer

Jesse picture Jesse · Sep 8, 2009

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;

Related questions

Finding the index of an item in a list

Given a list ["foo", "bar", "baz"] and an item in the list "bar", how do I get its index (1) in Python?

Read More
How do I get the number of elements in a list?

Consider the following: items = [] items.append("apple") items.append("orange") items.append("banana") # FAKE METHOD: items.amount() # Should return 3 How do I get the number of elements in the list items?

Read More
How do I check if a list is empty?

For example, if passed the following: a = [] How do I check to see if a is empty?

Read More