Horizontal Lists without floating the LI

Question

Okay, so I'm writing CSS for a navigation bar that uses an un-ordered list to organize the menu. The menu is centered not pushed to any side, and the width of any given li element cannot be pre-determined (it varies with how much text is in the menu item), so I can't hardcode widths.

I have the following CSS code:

#nav ul {
    list-style: none;
    padding-bottom: 10px;
    height:16px;
}
#nav ul li {
    position: relative;
    display: inline-block;
}
#nav {
    position: relative;
    margin-top: -30px;
    text-align: center;
    font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
    font-size: 14px;
}

for the nav element, and this works perfectly to produce the centered nav-menu in Chrome 13. But when I view the page in IE8, the UL turns vertical and I can't get it to become horizontal.

So far, search results indicate that I need to float:left; or float:right; the <LI>s to make the menu horizontal. I've tried this and it does make the menu horizontal in IE8 but it will float to left or right. I need to center the menus, and apparently there is no float:center;.

The HTML corresponding to the menu is

<div id="nav">
    <ul>
        <li class="current_page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
    </ul>
</div>

Is there any way without needing to know the width of the LIs or having to resort to JS to get the menu centered AND horizontal?

score 3 · Answer 1 · answered Aug 04 '11 at 15:56

3

just use the following on your li:

display: inline;

Should get you the desire results.

answered Aug 04 '11 at 15:56

Hanny

2,078
6
24
52

score 3 · Accepted Answer · edited May 23 '17 at 12:15

That code works fine in IE8, see for yourself:

http://jsfiddle.net/bEEEb/

It's probably not working for you because you're not in IE8 Mode (IE7 Mode or Quirks Mode are the alternatives).

Add a doctype as the very first line if you don't have one:

<!DOCTYPE html>

If you need this to also work in IE7 (in which inline-block only works with naturally inline elements by default), then replace display: inline-block with:

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

..of course, if you can get away with display: inline, that's the simplest fix, but you should still work out why your page is not being displayed in IE8 Mode.

I see, thanks for this tip. I'm trying to achieve highest browser compitability. — jabbany, Aug 04 '11 at 16:17

score 1 · Answer 3 · answered Aug 04 '11 at 15:55

1

IE doesn't support display: inline-block, use display: inline instead on you li element.

answered Aug 04 '11 at 15:55

Michael

763
3
5

Horizontal Lists without floating the LI

3 Answers3

Linked