Question

我有这个CSS代码：

.MyIntegra_Container {
    width:95%;
    margin:0 auto 0 auto;
    border:1px solid black;
}

#CustomerMenu ul {
    padding: 0;
    margin:0 auto 500px auto;
    list-style-type: none;
    text-align: center;
    display:inline;
}
#CustomerMenu ul li {
    display: inline;
}
#CustomerMenu ul li a {
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
}
#CustomerMenu ul li a:hover {
    color: #fff;
    background-color: #f36f25;
}

http://jsfiddle.net/wU3WM/

如何让菜单显示在div的中心和div的顶部不重叠？

Answer 1

由于您的内部内容具有内联布局，因此您可以在容器中使用text-align:center来居中：

.MyIntegra_Container {
    width:95%;
    margin:0 auto;
    border:1px solid black;
    text-align:center;
}

#CustomerMenu ul {
    padding: 0;
    list-style-type: none;
    display:inline-block;
}

JSFiddle

Answer 2

您是否尝试制作一个水平菜单？

我在jsfiddle

中重写了您的代码

<div class="MyIntegra_Container">
<div id="CustomerMenu">
    <ul>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
    </ul>
</div>
Text goes here
</div>

CSS：

.MyIntegra_Container {
    width:95%;
    margin: 0 auto;
    border:1px solid black;
}

#CustomerMenu ul {
    padding: 0;
    margin: 10px auto;
    list-style-type: none;
    text-align: center;
}
#CustomerMenu ul li {
    display: inline;
}
#CustomerMenu ul li a {
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
}
#CustomerMenu ul li a:hover {
    color: #fff;
    background-color: #f36f25;
}

Answer 3

只需添加2个即可获得所需效果。添加填充：0px;到李里面的锚。它将删除重叠，它将成为 -

#CustomerMenu ul li a
{
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
    text-align: center;
}

接下来就是将text-align：center添加到ID为＆＃39; CustomerMenu＆＃39;的div中。你必须添加这个 -

#CustomerMenu
{
   text-align:center;
}

感谢。

使UL菜单显示在div内部和中央的顶部

3 个答案:

JSFiddle