居中我的导航菜单链接答案

【问题标题】：Centering my navigation menu links居中我的导航菜单链接
【发布时间】：2012-06-11 21:11:45
【问题描述】：

我似乎无法弄清楚这一点。我试过 text-align: center; , display: inline-block 等等，但我只是不知道如何在#menu-bottom-nav 中将导航居中。

CSS

#menu-bottom-nav { width: 600px; height: 70px; margin: 0px auto;}
#menu-bottom-nav li { list-style-type: none; float: left; margin-right: 20px;}

感谢任何帮助。

【问题讨论】：

如果你把 li 的左边浮起来，你会怎么期待呢？！
好吧，如果我不这样做，它们就不会像我想要的那样出现在两条线上。
您不能将没有固定宽度的项目居中。
是的，你可以在没有固定宽度的情况下居中，这太荒谬了。
它们什么时候会出现在两行上？在这里，我会发布一个答案。没有您的 HTML，我们无法确定发生了什么...

标签： css navigation centering alignment

【解决方案1】：

试试这个：

<!DOCTYPE>

<html>
<head>
    <title>Test</title>

    <style type="text/css">
        #menu-bottom-nav {
            margin: 0;
            padding: 0;
            width: 600px;
            text-align: center;
            border: 1px solid #000;
        }

        #menu-bottom-nav li {
            list-style-type: none;
            margin-right: 20px;
            border: 1px solid #ff0000;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }
    </style>
</head>
<body>
    <ul id="menu-bottom-nav">
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
</body>
</html>

【讨论】：

感谢 ianpgail。 :) 我会记住导航菜单的格式和样式。
没问题！你可以使用 inline-block 或 inline，这取决于你！
我刚刚在 IE 7 中看到它，但它在那里不起作用。你知道为什么会这样吗？
我刚刚在我的帖子中为“#menu-bottom-nav li”添加了 CSS 属性。试试看！
这就是您所需要的。哇。再次感谢。