html-lists - CSS UL/LI 菜单不居中

Question

我的 CSS UL 菜单似乎不想居中，有什么想法吗？我粘贴了下面的代码供您查看，我对 CSS 很陌生，因此非常感谢您的帮助:-)

我能够将其居中的唯一方法是固定宽度并使用 html center 标签，但我需要将菜单设置为 100% 以进行扩展，并且我需要自动居中。

CSS

#menu{
    width:100%;
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
    background-color:#333333;
    text-align:center;
}

#menu li{
    float: left;
    padding: 0 0 5px 0;
    position: relative;
    list-style:none;
    margin:auto;
}

#menu ul{
        list-style:none;
        display:inline;
        margin: 0;
        padding: 0;
        text-align: center;
}

#menu a{
    float: left;
    height: 15px;
    padding: 0 25px;
    color:#FFF;
    text-transform: uppercase;
    font: 10px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 0px 0 #000;
}


#menu li:hover > a{
    color:#F90;

    font: bold 10px/25px Arial, Helvetica;
}

*html #menu li a:hover{ /* IE6 */
    color: #F06;
}

#menu li:hover > ul{
    display: block;
}

再次感谢:-)

Answer 1

为您的菜单提供宽度并使用margin: auto;

#menu{
    width:300px; <--------Here
    margin: 0 auto; <-----Here
    padding: 5px 0 0 0;
    list-style: none;
    background-color:#333333;
    text-align:center;
}

而且你为什么要这样做？

#menu li:hover > ul{
    display: block;
}

还有这个

#menu a{
    float: left;
    ....
}

更新:只需阅读您的级联看起来很乱的所有样式，使用以下内容

#menu { /* I Assume this ID is applied to <ul> element */
    width:/*Whatever you want to define*/;
    margin: 0 auto; <---Change Here
    padding: 5px 0 0 0;
    list-style-type: none;  <---Change Here
    background-color:#333333;
    text-align:center;
}

#menu li{
    float: left; <---You don't need this
    padding: 0 0 5px 0;
    position: relative; <---You don't need this too
    list-style:none; <---You don't need this too
    margin:auto; <---You don't need this too
}

/* Take out this entirely from here */
#menu ul{
        list-style:none;
        display:inline;
        margin: 0;
        padding: 0;
        text-align: center;
}
/* till here */

#menu a{
    float: left; <---You don't need this
    height: 15px;
    padding: 0 25px;
    color:#FFF;
    text-transform: uppercase;
    font: 10px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 0px 0 #000;
}


#menu li:hover > a{
    color:#F90;

    font: bold 10px/25px Arial, Helvetica;
}

*html #menu li a:hover{ /* IE6 */
    color: #F06;
}

#menu li:hover > ul{
    display: block;
}

如果你想让菜单内的链接也居中，只需使用这个

HTML

<ul id="#menu">
  <li></li>
</ul>

CSS

#menu li {
  text-align: center;
}