如何使用 ul 使菜单栏居中答案

【问题标题】：How I can center a menu bar with ul如何使用 ul 使菜单栏居中
【发布时间】：2014-03-07 05:27:42
【问题描述】：

我在 div 中有一个简单的菜单栏，我可以将 div 居中，但我想将菜单栏置于 div 中。

这是代码：

CSS：

* {
    margin: 0px;
    padding: 0px;
}


.menu {
    height: 35px;
    width: auto;
    background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(130, 28, 107);
    border-radius: 15px;
    padding-top: 10px;
}

ul#navmenu, ul.sub1, ul.sub2 {
    list-style-type: none;
    font-size: 9pt;
    max-width: 660px;
    margin: 0 auto;
}
ul#navmenu li {
    width: 125px;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}
ul#navmenu a {
    text-decoration: none;
    display: block;
    width: 125px;
    height: 25px;
    line-height: 25px;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 10px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .sub1 a {
    margin-top: 5px;
}
ul#navmenu .sub2 a {
    margin-left: 3px;
}
ul#navmenu li:hover > a {
    background-color: #CFC;
}
ul#navmenu li:hover a:hover {
    background-color: #FF0;
}
ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 26px;
    left: 0px;
}
ul#navmenu ul.sub2 {
    display: none;
    position: absolute;
    top: 0px;
    left: 126px;
}
ul#navmenu li:hover .sub1 {
    display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
    display: block;
}
.darrow {
    font-size: 11pt;
    position: absolute;
    top: 5px;
    right: 4px;
}
.rarrow {
    font-size: 13pt;
    position: absolute;
    top: 6px;
    right: 4px;
}

HTML：

<html>
<head>
    <title><?php echo $title; ?></title>
    <link rel="stylesheet" type="text/css" href="recursos/css/main.css">
    <meta charset="utf-8">
    <div class="logo"></div>
    <div class="menu">
    <ul id="navmenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Novedades</a></li>
        <li><a href="#">Categorías <span class="darrow">▼</span></a>
        <ul class="sub1">
            <li><a href="#">Acción</a></li>
            <li><a href="#">Aventuras</a></li>
        </ul></li>
        <li><a href="#">Profile <span class="darrow">▼</span></a>
        <ul class="sub1">
            <li><a href="#">Menu 4.1</a></li>
            <li><a href="#">Menu 4.2 <span class="rarrow">▶</span></a>
            <ul class="sub2">
                <li><a href="#">Menu 4.2.1</a></li>
                <li><a href="#">Menu 4.2.2</a></li>
            </ul></li>
        </ul></li>
    </ul>
    </div>
</head>
<body>

我试着放了

ul#navmenu {
    display: block
}

但它不起作用，我不明白什么...因为我可以将 div 居中...

我该怎么做？

【问题讨论】：

可能是因为它是ul#navmenu 而不是ul#navbar？
你的 CSS 规则应该是display: block;，而不是display.block。
ul 元素居中对齐。关键是列表项向左浮动。您可以使用display: inline-block 代替float: left 作为列表项，使用text-align: center 作为ul
旁注 - 您的标签应该在您的内容开始之前关闭。此外，您的只有一个结束标记，因此从技术上讲它永远不会开始。
你不应该把所有这些都放在你的<head> 标签中。 <meta>tags 之后的所有内容都应该在 <body> 内。

标签： html css

【解决方案1】：

首先，请注意，您应该将元素放在<body>标签内。

实际上，ul 元素是居中对齐的（参见 demo here）。但重点是列表项浮动向左。

有 tow 选项：

为<ul> 元素使用适当的固定宽度（或您所做的最大宽度）。 Working Demo
或者使用display: inline-block代替float: left作为列表项，使用text-align: center作为ul水平对齐内联元素。 Working Demo。

但注意，内联（-block）元素之间有一个空白，这绝对是内联流中内联元素的正常行为。你可以参考 my answer here 来解决这个问题。

【讨论】：

@Ninjacu 欢迎您。也请考虑我的更新以防止出现意外问题。

【解决方案2】：

首先，确保 div 比菜单栏宽。你可以试试

display:inline

如果不是

text-align:center;

对于 div

【讨论】：

好的，谢谢它适用于 text-align: center;在 div 中非常感谢！
没有问题，当涉及到这些问题时，我和你在同一个区域：D

【解决方案3】：

很可能是您尝试设置的宽度太大？ http://jsfiddle.net/As98Q/

width: 550px;

【讨论】：