1

我试图在 div 菜单中居中 ul 。我查看了其他菜单并尝试了我能想到的所有组合，但我仍然无法得到它。

这是代码：

#cssmenu ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:100%;
    position:relative;
    display:block;
    height:38px;
    font-size:14px;
    background:#f9f8f8;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    font-family:Arial,Helvetica,sans-serif;
}
#cssmenu li{
    display:block;
    float:left;
    margin:0;
    pading:0;
    }
#cssmenu li a{
    display:block;
    float:left;
    color:#333333;
    text-decoration:none;
    padding:12px 20px 0 20px;
    height:24px;
    height:38px;
    }
#cssmenu li a:hover{
    text-decoration:underline;  
    }


    <div id="cssmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">The Program</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Members Login</a></li>
</ul>
</div>

任何帮助将不胜感激。

谢谢！麦克风

4

1 回答 1

2

你必须width: 100%从第一个删除ul。您不能真正将与容器大小相同的东西居中:)。删除后，您可以制作 list inline-block，因此它占用了其子项的宽度，然后text-align在 div 上使用简单的。

#cssmenu {
    text-align: center;
}

#cssmenu ul{
    display: inline-block;
}

当然，您必须将一些样式从列表移动到 div，因为列表不再是全宽的。

jsFiddle 演示

于 2013-01-25T19:44:00.900 回答