XHtml 严格、浮动：居中？

Question

我在 Xhtml Strict 1.0 和 Css 上遇到了困难。我几乎没有解决方案了。

我的网站网址：http://www.pro-turk.net/beta/

我为我的网站制作了一个 jquery 多级下拉菜单。

看起来不错，但我在导航菜单上使用了 css 显示属性的 inline-block 属性，该属性是 css 2.1 的一部分，并且某些浏览器（包括 ie6 和 ie7）不支持。

我想让#nav > li 元素块级元素，但要做到这一点并使所有这些元素位于同一行，唯一的方法是在 #nav > 中使用 float李。但我想将它们集中在其父级（菜单栏）中。所以我需要像 float:center 这样的东西（我知道它很愚蠢并且不存在）。但是有没有一种方法可以将块级元素包含为没有换行符的子元素（我的意思是不创建块级元素）。

问候。

Answer 1

您可以使 li 向左或向右浮动并使菜单本身居中。使菜单的宽度为其元素之和。

#nav
{
    width: 500px;

    /* This will center the block within its container */
    margin-left: auto;
    margin-right: auto;
}

编辑：由于您不知道菜单的宽度（它是动态的），我们将遇到没有表格替代方案的情况。

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
        <td>Menu item 1</td>
        <td>Menu item 2</td>
        <td>Menu item 3</td>
    <tr>
<table>

PS 有一些表格可以用较新的 CSS3 扩展来替代，例如 display:table | table-cell 等，但它还没有得到广泛的支持。

Answer 2

IE6 或 IE7 不支持 display:inline-block，但您可以通过使用 display:inline 并确保在这些元素上设置 hasLayout（例如使用 Zoom:1）在这些浏览器中获得相同的效果。使用条件注释将不同的 css 仅定向到这些浏览器。

Answer 3

我认为在 css2 中没有不使用表格的解决方案。