0

我通常很擅长解决这个问题，但我常用的方法在这里不起作用。我的朋友让我尝试在此处修复 CSS ( http://www.latheaterfestival.com/ )，但菜单 ul 只是没有居中。尝试 100% 宽度，边距：0 自动；text-align: center....什么都不会让步。这是菜单 HTML（稍微精简）：

<div class="nav-container"><ul class='wsite-menu-default'><li id='active'><a href='/index.html'>Home</a></li><li id='pg440106722136607103'><a href='/about.html'>About</a></li></ul></div>

这是 CSS Weebly 吐出来的：

#nav-wrap .nav-container { float:center; position:relative; left:-50%; text-align:left; margin-top:10px; z-index:2; }
#nav-wrap .nav-container ul{ list-style:none; position:relative; left:50%; z-index:2; }
#nav-wrap .nav-container li{float:center;position:relative;}
#nav-wrap .nav-container a{ text-decoration:none; font:600 12px 'Josefin Sans', sans-serif; text-transform:uppercase; margin:10px 15px; float:left; color:#666; letter-spacing:2px; padding:1px 2px; text-align:center; white-space:nowrap; }
#nav-wrap .nav-container a:hover{border-bottom:1px dashed #666;}
#nav-wrap .nav-container li#active a {border-bottom:1px solid #888;}
#nav-wrap .nav-container a:active{padding:2px 2px 0px;}
#nav-wrap {overflow:hidden}

有任何想法吗？

4

1 回答 1

0

不要使用浮动和相对位置，使用 display: inline-block。这是jsfiddle

#nav-wrap .nav-container
{
    margin-top: 10px;
    text-align: center;
    z-index: 2;
}
#nav-wrap .nav-container ul
{
    display: inline-block;
    list-style: none;
    padding: 0;
    z-index: 2;
}
#nav-wrap .nav-container li
{
    display: inline-block;
}
#nav-wrap .nav-container a
{
    color: #666;
    float: left;
    font: 600 12px 'Josefin Sans', sans-serif;
    letter-spacing: 2px;
    margin: 10px 15px;
    padding: 1px 2px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
#nav-wrap .nav-container a:hover
{
    border-bottom: 1px dashed #666;
}
#nav-wrap .nav-container li#active a
{
    border-bottom: 1px solid #888;
}
#nav-wrap .nav-container a:active
{
    padding: 2px 2px 0px;
}
#nav-wrap
{
    overflow: hidden;
}
于 2015-01-23T01:53:57.663 回答