3

我的 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;
}

再次感谢 ：-）

4

2 回答 2

5

为您提供宽度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;
}
于 2012-10-29T19:52:17.633 回答
0

推杆

text-align:center;

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

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

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

text-align:center;

在里面。

于 2012-10-29T19:54:02.480 回答