Question

我遇到了麻烦的问题（水平地）我的ul＃菜单位于页面中间。这一切都正常运作，正如预期的那样，我只是在集中处理问题。

这是CSS：

ul#menu, ul#menu ul.sub-menu {
    padding: 0px;
    margin: 0px;
}

ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    padding: 0px;
    display: inline-block;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
    font-weight: bold;
    font-size: 17px;
}

ul#menu li a {
    padding: 15px;
}

ul#menu li {
    position: relative;
}

ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 46px;
    left: 15px;
    width: 150px;
}

ul#menu li:hover ul.sub-menu {
    display:block;
}

ul#menu li ul.sub-menu li a {
    background-color:grey;
    opacity:1;
    height:20px;
    border-bottom-style:solid;
    border-bottom-color:#30F;
    border-bottom-width:2px;
    padding:5px;
    font-weight:bold;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 12px;
}

#menucontainer {
    position:absolute; 
    width:700px;
    top:158px; 
    margin-left: auto;
    margin-right: auto;
    opacity:0.8; 
    z-index:20;
}

这是HTML：

<div id="menucontainer">
<ul id="menu">
<li>
    <a href="/">Home</a>
</li>

<li>
    <a href="http://games.engagearcade.com">Games</a>
    <ul class="sub-menu">
        <li>
            <a href="http://descent.engagearcade.com">>> Descent</a>
        </li>

    </ul>
</li>

<li>
    <a href="http://prizes.engagearcade.com">Prizes</a>
</li>

<li>
     <a href="http://ladder.engagearcade.com">Ladder</a>
</li>

<li>
    <a href="http://community.engagearcade.com">Community</a>
    <ul class="sub-menu">
        <li>
            <a href="http://community.engagearcade.com">>> Submissions</a>
        </li>

        <li>
            <a href="http://support.engagearcade.com">>> Support/Help</a>
        </li>

    </ul>
</li>

<li>
    <a href="http://forums.engagearcade.com">Forums</a>
</li>

<li>
    <a href="http://about.engagearcade.com">About Us</a>
    <ul class="sub-menu">
        <li>
            <a href="http://about.engagearcade.com">>> Engage Arcade</a>
        </li>

        <li>
            <a href="http://involved.engagearcade.com">>> Those Involved</a>
       </li>

    </ul>
</li>
</ul>
</div>

对于大块代码感到抱歉，但我不确切知道哪些部分与帮助解决问题有关。要寻找的主要内容是menucontainer。

欢呼任何建议。

小提琴：http://jsfiddle.net/HcfMT/

Answer 1

问题在于它绝对定位。摆脱它，因为你无论如何都会误用它。

http://jsfiddle.net/HcfMT/2/

width:700px;
margin-top:158px;

Answer 2

这是一个简单的修复...你非常接近它。

#menucontainer
    position:absolute; 
    width:700px;
    top:158px; 
    margin-left: auto;
    margin-right: auto;
    opacity:0.8; 
    z-index:20;

到

#menucontainer {
    position:relative; 
    width:700px;
    top:158px; 
    margin: 0 auto;
    opacity:0.8; 
    z-index:20;
}

您需要#menucontainer相对定位。

如何水平对齐ul＃菜单与页面

2 个答案: