html - 宽度：自动不适用于下拉导航

Question

这将很难解释，所以我创建了一个JS-Fiddle，所以你们可以明白我的意思......

如果您在“产品”选项卡下查看我制作的列表中的第二个链接，结果是它溢出了列表的边界。如果链接很长，我怎样才能使包含 ul 的宽度延伸到包含链接？

再次查看 JSfiddle 将使事情更清楚地了解正在发生的事情和需要做的事情。

PS - 需要让它在不编辑 HTML 的情况下工作！

//Ignore this

score 3 · Accepted Answer

只需删除列表的固定宽度：

ul li {
    display: block;
    position: relative;
    float: left;
    width: 140px; // <-- Remove this
    height: 25px;    
}

它将使您的列表的默认宽度变为自动，您就完成了。

score 2 · Accepted Answer

2

只需更改width:140px;为min-width:140px;ul li

演示：

于 2013-04-04T10:01:34.343 回答

score 0 · Accepted Answer

您正在<li>从顶级菜单的样式中限制 s 的宽度。这将使您的预期保持width: 140px;在顶级菜单上，并允许子菜单根据其内容调整大小。

ul#menu li ul li {
    width:auto;
}

score 0 · Accepted Answer

您正在嵌套列表上设置固定宽度。

ul li将样式更改为：

#menu > li {
    display: block;
    position: relative;
    float: left;
    width: 140px;
    height: 25px;
}

这将从嵌套ul的 s 中删除固定宽度，允许它们根据需要占用尽可能多的空间。

4 回答 4