3

我使用 Superfish 1.4.8 作为水平菜单

菜单位于 900px 的固定宽度 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% 的容器？

4

4 回答 4

1

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

http://jsfiddle.net/EFnTa/

希望能帮助到你。

于 2012-01-10T12:05:08.267 回答
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 中测试过。

于 2011-06-02T04:45:03.473 回答
1

我不确定您是否使用 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

于 2012-09-14T13:57:28.140 回答
0

  1. 任何浮动的元素都将忽略 display 属性，因此在您的代码.sfmenu中不会显示为表格（在您的小提琴中，浮动是在代码中稍后设置的）

  2. .sfmenu 是父 ul，所以它应该display: table-row;与它的直接子li项一起存在 display: table-cell;-.sfmenu ul li选择下拉列表而不是顶级水平

  3. #containerdiv 应该是那个display: table;

看这个例子

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

于 2011-06-02T04:58:16.613 回答