Question

我的CSS UL菜单似乎不想中心，任何想法？我已粘贴下面的代码供您查看，我对CSS很陌生，所以非常感谢您的帮助： - ）

我能够居中的唯一方法是固定宽度并使用html中心标签，但我需要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

为menu提供宽度并使用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;
}

Answer 2

放

text-align:center;

ul中的

表示ul中的文本居中。你应该添加：

margin-left:auto;
margin-right:auto;

到ul。这将适用于所有主流浏览器保存IE。要在IE中工作，您需要确保包含ul的标记

text-align:center;

在其中。

CSS UL / LI菜单不居中

2 个答案: