Question

我通常很擅长解决这个问题，但我常用的方法并不在这里工作。我的朋友让我尝试在这里修复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}

有什么想法吗？

Answer 1

不要使用float和position relative，请使用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;
}

Weebly中的CSS。无法将菜单置于中心位置

1 个答案: