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

【问题标题】：How to center a superfish menu in wordpress (in IE7)如何在 wordpress 中将超级鱼菜单居中（在 IE7 中）
【发布时间】：2011-11-20 21:42:32
【问题描述】：

我有一个 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 中不起作用。

好的，我尝试了一种在 google 上搜索的方法，在我检查 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 中的顶部菜单，因为它会中断。

【问题讨论】：

所以你确实让它工作了，只是在 IE7 上不行。那你问错问题了。 ;)
这是我在研究后发现的内容的编辑。我应该这样说，将再次编辑问题
所以现在就在 IE 上修复它。添加只影响IE<=7 的CSS。此外，问题在于 IE7- 拒绝显示为 inline-block 元素，而这些元素原本是 block 元素。抱歉，我没有时间研究这个。
好吧，我不着急，我只会玩IE7的声明，看看我能做什么，如果你可以稍后或其他任何一天看看，请做。感谢您的意见。
你可以在这里查看：hermandaddelcalvario.org/wordpress 虽然我在玩 ie7 的东西 atm

标签： javascript html css wordpress superfish

【解决方案1】：

你可以试试这样的：

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

【讨论】：

它没有为我居中：S
我的错，最后一个值应该是-25%。会这样吗？
整个 div 向右移动，其余内容向左移动：S
尝试调整左边的值直到它看起来居中。

【解决方案2】：

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

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

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

【讨论】：

菜单是浮动的，因为那是 superfish 的 css（我想它正在做某事）。如果我将内联块更改为内联，则下拉菜单会中断，这些项目将充当内联元素并一个接一个地运行。我想我必须破解它或其他东西。
最后一条评论的 Nvm，它现在正在工作，非常感谢您的时间。