Horizontal Lists without floating the LI_问答_开发者

Horizontal Lists without floating the LI

开发者 https://www.devze.com 2023-03-26 11:20 出处：网络

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-deter

相关专题：css

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 a开发者_如何学运维nd 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?

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.

just use the following on your li: