Jquery 如何使Superfish菜单水平宽度达到100%？

我使用Superfish 1.4.8作为水平菜单

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

我希望Superfish的宽度为100%（900px），并根据项目数量自动调整每个li的宽度。此菜单中的项目数将随时间变化

基本上，我想要100%宽度表的相同行为和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%; }

它看起来应该可以工作，但它没有，菜单仍然显示完全相同

在JSFIDLE上：

---

有人能将Superfish缩放到容器的100%吗？

更新：

查看本文中的“jQuery全宽导航插件””：

---

这是因为您的

.sf菜单li

列表项向左浮动

使用更新的样式签出编辑过的JSFIDLE：

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

更新了JSFIDLE链接：

如果您想将导航置于中心位置，可以执行以下操作：

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

参见更新的JSFIDLE v2：

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

任何浮动的元素都将忽略display属性，因此在代码

.sfmenu

中不会显示为表（在小提琴中，浮动在代码中设置得更晚）

.sfmenu

是父ul，因此它应该是

显示：表行

及其直接子项

li

项为

显示：表格单元格

-

.sfmenu ul li

正在选择下拉列表，而不是顶层水平列表

#container

div应该是

display:table

---

正如上面的代码所示，只有下拉列表才能获得这些属性，这就是为什么第一级没有扩展，尽管我认为子级列表不需要它们，但它可能只是第一级。我不能完全确定子菜单的定位是否能正常工作，即使上面被更正为“真实”表格单元格不接受相对定位，需要一些下降级别来测试。

我不确定这是否是您想要的，但在完成本文并做了一些实验后，我已经达到了这一点：

---

希望有帮助。

我不确定您是否使用DNN，但我想到了从他们的黑暗皮肤上伸展我的superfish导航容器的想法。这就是我所做的

#strech_nav
{
    width:100%;
    height:31px;
    background:url(images/yournavbg.jpg) repeat-x;
    z-index: 9;
}

#strech_nav #nav
{
    width:900px;
    height:31px;
    background:url(images/yournavbg.jpg) repeat-x;
    font-size:medium;
    margin:auto;
    color:White;
    position: relative; 
    z-index: 9;

}

然后在ascx文件中

<div id="strech_nav"><div id="nav"><dnn:MENU ID="MENU1" MenuStyle="Superfish" runat="server"/></div></div>

---

希望对您有所帮助：）请注意，如果您希望导航容器跨越页面的宽度，那么这就是您想要使用的。如果你想让你的导航跨越一个特定的像素宽度，删除#拉伸#导航的内容并修改#拉伸#导航#导航

你能对你的代码做一个修改吗？是的，给你-这是带有Superfish.css的标准Superfish.js（在css中添加了3行，请参见标有“尝试获得100%宽度”的部分）如果菜单在一个固定为900px的div内，那么这不就是保持其大小不变的原因吗？我希望导航是其容器的100%，现在导航小于900px——它拒绝扩展到900px宽，你有没有偶然发现？这更好，但它实际上没有拉伸导航以适应空间，在第一个示例中，将其转换为垂直导航（需要保持水平），在第二个示例中，将导航居中，但不拉伸li以填充空间（如表中的td），您可能需要某种javascript来将导航拉伸到可用宽度。谢谢clairesuzy，顶层看起来很棒，但在“主页”中添加子菜单会产生不希望的结果，请看一看，它似乎与position:relative；--为了测试定位/显示和隐藏，我从中删除了所有IE内容，但您知道，这在IE7和以下版本中无论如何都不起作用，因为它不支持CSS表属性，所以

.sfHover选择器

代码无论如何都不起作用（我在8中没有测试过）。下拉列表仍然需要一个固定的宽度，因为它们似乎不想带上它们的父“单元格”