2

我有一个 wordpress 博客，其中有一个菜单，我想将其设置为 superfish 下拉菜单，我按照本教程进行操作：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 之前有效，看起来 inline-block 正在使菜单完全中断：

#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 中的顶部菜单，因为它会中断。

4

2 回答 2

2

对于原本是块级元素的元素，IE7 不喜欢 inline-block。
但是您没有在lis 上使用任何边距，那么为什么不使用display: inline;呢？我认为这不会有任何区别。

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

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

于 2011-09-20T12:24:15.630 回答
0

你可以尝试这样的事情：

.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。该列表不会真正居中，但它会尽可能接近，真的。

于 2011-09-20T09:07:50.107 回答