Question

我有一个wordpress博客，其中包含一个菜单，我希望将其设置为超级鱼类下拉菜单，我遵循了本教程：http://kav.in/wordpress-superfish-dropdown-menu

到目前为止，菜单看起来很棒，但我需要它居中而不是左对齐。这是我的代码：

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
}
.sf-menu {
    float:              left;
    width:              100%;
    text-align:center;
}
.sf-menu li {
    background:         transparent;
}
.sf-menu a {
    padding:            0px 15px;
    text-decoration:    none;
    line-height:        40px;
}
.sf-menu ul li a {
    padding:            0px 15px;
    text-decoration:    none;
}
.sf-menu li li {
    background:         #611718;
    text-align: left;
}

菜单中的项目当然有可变宽度。

我没有没有所有sf类的html，但它是一个或多或少像这样的简单列表：

 <div id="navwrap">

    <ul class="sf-menu">

    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a>
        <ul>
            <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        </ul>
    </li>
   </ul>
 </div>

编辑：我找到了一种中心方法，但它在IE7中不起作用。

好吧，我尝试了一种方法，我发现在谷歌搜索，它似乎工作，直到我检查IE7，看起来像内联块正在使菜单完全中断：

#navwrap .sf-menu {
   text-align: center;
}
#navwrap .sf-menu li {
   display: inline-block; 
   float: none;
}
#navwrap .sf-menu li a {
   display: inline-block;
}

这是我正在处理的页面：http://hermandaddelcalvario.org/wordpress/您可以检查IE7中的顶级菜单。

Answer 1

对于最初是块级元素的元素，IE7不喜欢内联块但是你没有在li上使用任何边距，那么为什么不使用display: inline;呢？我认为它不会有任何不同。

似乎使用内联使菜单消失删除float: left;似乎解决了这个问题。

（为什么菜单浮动，无论如何？它似乎没有任何区别。）

Answer 2

您可以尝试这样的事情：

.wrapper{
    position: relative;
    left:     50%;
    width:    100%;

}

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
    position:           relative;
        left:           -25%;
}

在.wrapper里面有#navwrap。该列表不会真正集中，但它会尽可能接近，真的。

如何在wordpress中居中超级鱼菜单（在IE7中）

2 个答案: