Question

我的网站顶部有一个下拉导航栏，我想将导航栏居中，但我无法让它工作，它似乎被卡在左侧。您可以查看网站here，我已粘贴以下代码。

我一直试图让这一整天都在工作，但我看不出问题出在哪里。我不知道还有什么要写，任何帮助都会非常感激。

我的style.css：

#menu{
    position: absolute;
    z-index: 1;
    padding:0;
    margin: auto;
}
#menu ul{
    padding:0;
    margin:0;
    margin: auto;
    text-align: center;
    display: inherit;
}
#menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}
#menu li a{
    width:100px;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    background-color: white;
    color: #7B99FF;
    font-size: 16px;
}
#menu li a:hover{
    color: #000;
}
#menu li .subnav a {
    color: #7B99FF;
    font-size: 13px;
}
#menu li .subnav a:hover{
    color: #000;
    font-size: 13px;
}
#menu ul ul{
    position: absolute;
    top: 30px;
    visibility: hidden;
}
#menu ul li:hover ul{
    visibility:visible;
}
.subnav {
    font-size: 13px;
}

我的index.php：

<div id="menu">
<ul>
<li><a href="#nogo">About me</a>
</li>
<li><a href="#nogo">Categories</a>
<ul class="subnav">
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Archive</a>
<ul class="subnav">
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
<li><a href="#nogo">Contact</a>
</li>
</ul>
</div>

Answer 1

删除#menu的'绝对'位置并给它一些宽度：

#menu{
width:400px;
z-index: 1;
padding:0;
margin: auto;}

如果您不想手动设置宽度，可以将根包装在带有样式的div中：

text-align:center

为什么此菜单导航<div>不是居中对齐？</div>

1 个答案: