如何使 Superfish 菜单水平宽度为 100%？答案

【问题标题】：How to make Superfish menu horizontal width 100%?如何使 Superfish 菜单水平宽度为 100%？
【发布时间】：2011-09-06 17:11:24
【问题描述】：

我使用 Superfish 1.4.8 作为水平菜单

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

我希望 Superfish 的宽度为 100% (900px)，并根据项目的数量自动调整每个 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% 的比例？

【问题讨论】：

您可以为您的代码创建一个jsFiddle demo 吗？
是的，给你jsfiddle.net/xRcJL - 这是带有 superfish.css 的标准 Superfish.js（在 CSS 中添加了 3 行，请参阅标记为“试图获得 100% 宽度”的部分）
如果菜单在 div 中，固定宽度为 900px，那不就是让它保持相同大小吗？
我希望导航是其容器的 100%，现在导航小于 900 像素——它拒绝缩放到 900 像素宽
桑，你有没有偶然发现这个？

标签： jquery css superfish

【解决方案1】：

更新：

查看这篇文章了解“jQuery 全宽导航插件”：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/

如果您想使您的资产净值居中，您可以执行以下操作：

}
.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 中测试过。

【讨论】：

这更好，但它实际上并没有拉伸导航以适应空间，在第一个示例中将其转换为垂直导航（它需要保持水平），在第二个示例中它居中nav 但不拉伸 li 以填充空间（就像表格中的 td 一样）
您可能需要某种 javascript 来让 Nav 拉伸到可用宽度。

【解决方案2】：

任何浮动的元素都会忽略 display 属性，因此在您的代码中 .sfmenu 不会显示为表格（在您的小提琴中，浮动是在代码中稍后设置的）
.sfmenu 是父 ul，所以它应该是 display: table-row;，它的直属子 li 项目是 display: table-cell; - .sfmenu ul li 选择下拉列表不是顶层水平的
#container div 应该是 display: table;

See this example

正如您上面的代码所示，只有下拉列表才能获取这些属性，这就是为什么第一级不拉伸的原因，尽管我认为子级列表不需要它们，它可能应该只是第一级.即使将上述内容更正为“真实”表格单元格不接受相对定位，我也不完全确定子菜单定位能否正常工作，需要一些下降水平来测试..

【讨论】：

谢谢你 clairesuzy，顶层看起来不错，但在“主页”中添加子菜单会产生不良结果，看看jsfiddle.net/tufgD
它似乎确实适用于 position: relative; - refactored example - 我已经删除了所有的 IE 内容，只是为了测试定位/显示和隐藏，但你知道这在 IE7 及以下版本中无论如何都不起作用，因为它不支持 CSS 表格属性，这样.sfHover selector 代码无论如何都不会工作（我还没有在 8 中测试过）。下拉列表仍需要固定宽度，因为它们似乎不想将其父“单元格”与

【解决方案3】：

我不确定这是否是您正在寻找的东西，但是在关注了这篇文章并进行了一些实验之后，我已经到了这一点：

http://jsfiddle.net/EFnTa/

希望对你有帮助。

【讨论】：

【解决方案4】：

我不确定您是否使用 DNN，但我想到了将我的超级鱼导航容器从他们的 Darknight 皮肤中拉伸出来。这就是我所做的

#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>

希望对您有所帮助 :) 请注意，如果您希望导航容器跨越页面的宽度，请注意这是您想要使用的。如果您希望导航跨越特定像素宽度，请删除 #stretch_nav 的内容并修改 #strech_nav #nav

【讨论】：