Css 居中我的导航菜单链接_Css_Navigation_Centering_Alignment

Css 居中我的导航菜单链接

css navigation

Css 居中我的导航菜单链接,css,navigation,centering,alignment,Css,Navigation,Centering,Alignment,我只是想不通。我尝试了文本对齐：居中，显示：内联块等，但我不知道如何在#菜单底部导航中居中导航 CSS 感谢您的帮助试试这个： <!DOCTYPE> <html> <head> <title>Test</title> <style type="text/css"> #menu-bottom-nav { margin: 0; padding:

我只是想不通。我尝试了文本对齐：居中，显示：内联块等，但我不知道如何在#菜单底部导航中居中导航

CSS

感谢您的帮助

试试这个：

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


试验
#菜单底部导航{
保证金：0；
填充：0；
宽度：600px；
文本对齐：居中；
边框：1px实心#000；
}
#菜单底部导航李{
列表样式类型：无；
右边距：20px；
边框：1px实心#ff0000；
显示：内联块；
*显示：内联；
缩放：1；
}

试验
测试2
测试3

如果你把李放在左边，你会怎么想？！如果我不这样做，它们就不会像我想要的那样出现在两行上。你不能将没有固定宽度的项目居中。是的，你可以将没有固定宽度的项目居中，这太荒谬了。它们什么时候会出现在两行上？在这里，我将发布一个答案。没有您的HTML，我们无法确定发生了什么…谢谢ianpgail.）我会记住导航菜单的格式和样式。没问题！您可以使用内联块或内联，这取决于您！我刚刚在IE 7中看到了它，但它在那里不起作用。你知道为什么吗？我刚刚在我的帖子中为“#menu bottom nav li”的CSS添加了属性。试试看！这就是你所需要的。哇！再次感谢。

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