jquery - 如何让 Superfish 菜单水平宽度 100%？

Question

我正在使用 Superfish 1.4.8 作为水平菜单

菜单位于 900px 的固定宽度 div 中

我希望 Superfish 的宽度为 100%(900 像素)，并让每个 li 的宽度根据元素的数量自动缩放。此菜单中的元素数量会随时间变化。

基本上我想要 100% 宽度 TABLE 的相同行为和 TD 的自动调整大小行为

我从 2009 年的一篇关于如何做到这一点的旧帖子中找到了以下 CSS 添加内容:

.sf-menu { width: 100%; float: left; display: table;}
.sf-menu ul { display: table-row; }
.sf-menu ul li { display: table-cell; min-width: 20%; }

看起来应该可以，但是不行，菜单还是一模一样

在 jsFiddle 上: http://jsfiddle.net/xRcJL/

有没有人能够让 Superfish 达到容器的 100% 比例？

Answer 1

更新:

查看这篇文章以了解“jQuery 全 Angular 导航插件”:http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/

---

这是因为您的.sf-menu li 列表项向左浮动。

查看具有更新样式的已编辑 JSfiddle:

.sf-menu li {
    /*float: left;*/
    position: relative;
}

更新的 JSfiddle 链接:http://jsfiddle.net/xRcJL/1/

如果你想让你的 Assets 净值居中，你可以这样做:

}
.sf-menu{
    text-align:center;
    background-color:#ccc;
}
.sf-menu li {
    position: relative;
    display:inline-block;
    margin:0 -2px;
}

查看更新后的 JSfiddle v2:http://jsfiddle.net/xRcJL/3/

*适用于 Chrome、Firefox 和 IE8。没有在 IE7&6 中测试过。