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

时间:2014-03-28 00:06:11

标签: html css

我遇到了麻烦的问题(水平地)我的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/

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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

#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相对定位。