Question

我正在尝试将div放在div菜单中。我看过其他菜单，尝试了我能想到的每一个组合，但我仍然无法得到它。

以下是代码：

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

非常感谢任何帮助。

谢谢！麦克

Answer 1

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

#cssmenu {
    text-align: center;
}

#cssmenu ul{
    display: inline-block;
}

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

jsFiddle Demo

如何在div菜单中居中ul

1 个答案: