Question

我使用Superfish 1.4.8作为水平菜单

菜单位于固定宽度div为900px

之内

我希望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％？

Answer 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＆amp; 6中进行测试。

Answer 2

我不确定这是否是你要找的，但是在关注这篇文章并做了一些实验后，我已经到了这一点：

http://jsfiddle.net/EFnTa/

希望它有所帮助。

Answer 3

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

Answer 4

浮动的任何元素都将忽略display属性，因此在代码.sfmenu中不会显示为表格（在你的小提琴中，浮点数会在代码中稍后设置）
< / LI>
.sfmenu 是父级ul，因此它应该是display: table-row;，其子项li项为display: table-cell; - {{ 1}}选择下拉列表而不是顶级水平列表
.sfmenu ul li div可能应该是#container

See this example

正如上面的代码所示，只有获取这些属性的下拉列表才是第一级不伸展的原因，虽然我不认为子级列表需要它们，但它应该只是第一级。我不完全确定子菜单定位是否会正常工作，即使上面的内容被修正为“真正的”表格单元格不接受相对定位，也需要一些下降级别来测试..

如何使Superfish菜单水平宽度100％？

4 个答案: