将 NavBar 中心与宽度对齐：100%；答案

【问题标题】：Align NavBar center with width:100%;将 NavBar 中心与宽度对齐：100%；
【发布时间】：2013-01-07 17:16:13
【问题描述】：

我知道这个问题已经被问了 100 次，但我就是找不到对我有帮助的话题。我试图使导航栏居中，我的 div 的宽度为 100%。我只想让我的导航栏居中。任何帮助将不胜感激！这是我的 HTML：

<! Doctype HTML >
<html>
<head>
    <meta http-equiv="refresh" content="10" />
    <title>NavBar WareHouse</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div id="nav"> <!-- Nav Start -->
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="tabbed.html">Tabbed</a>
                <ul>
                    <li><a href="tab-colour.html">Colourful</a></li>
                    <li><a href="tab-elegant.html">Elegant</a></li>
                    <li><a href="tab-complex.html">Complex</a></li>
                </ul>
            </li>
            <li><a href="regular.html">Regular</a>
                <ul>
                    <li><a href="reg-colour.html">Colourful</a></li>
                    <li><a href="reg-elegant.html">Elegant</a></li>
                    <li><a href="reg-complex.html">Complex</a></li>
                </ul>
            </li>
            <li><a href="wild.html">Wild</a></li>
        </ul>
    </div>
</body>
</html>

还有我的 CSS：

/* Main CSS */

html{
    font-family: sans-serif;
}
body{
    background:#e8e8e8;
}
#nav{
    width:100%;
    background: #666;
    height:38px;
    padding:0;
}
#nav ul{
    display:inline-block;
    text-align:center;
    background-color::#666;
    width:100%;
    padding:0;
    margin:0 auto;
    list-style: none;
}
#nav li{
    width:100%;
    text-align: center;
    width:75px;
    float:left;
    position:relative;
    padding:10px;
    background:#666;
}
#nav li:hover{
    background: maroon;
}
#nav a{
    padding:10px;
    color:#fff;
    text-decoration:none;
}
#nav a:hover{
    background: maroon;
}
#nav ul ul{
    display:none;

}
#nav ul li:hover ul{
    width:75px;
    text-align: none;
    display:block;
    position:relative;
    left:-10px;
    top:10px;
}

【问题讨论】：

像这样的问题我想找到一种方法来将“中心无法容纳它为时已晚”纳入我的答案。

标签： html css center centering navbar

【解决方案1】：

您的 CSS 意味着导航栏实际上是居中的，但是因为您将每个元素设置为整个页面宽度，所以您的导航列表项元素都向左浮动。您实际上希望居中导航占据总页面宽度的多少比例？先算出这个数量，然后相应地调整ul 元素。

【讨论】：

【解决方案2】：

这在 Firefox 18 中对我有用...

#nav ul{
    /*display:inline-block; remove this */
    text-align:center;
    background-color::#666;
    width:400px; /* set this to a static width */
    padding:0;
    margin:0 auto;
    list-style: none;
}

【讨论】：