css - 溢出无助于隐藏流动的链接

Question

在这里，我有一个运行良好的 jquery 菜单。但是我给它一个 400px 的固定宽度，所以如果我向主 ul 添加超过一定数量的链接，它们将在下一行流动，这是绝对不希望的。

我试图overflow:hidden以line-height某种方式克服这个问题，但无论如何都没有结果。

这是菜单：http: //jsfiddle.net/b5Wdc/

如您所见，红色链接在下一行流动，这就是问题所在。

在这种情况下，我应该怎么写才能隐藏溢出的链接？

总之谢谢大家。

Answer 1

从我们在问题评论中的对话来看，您的菜单似乎是完全固定的，任何“额外”项目都应始终隐藏，并且不需要动态显示或包装。因此，您可以使用 CSS 隐藏所有您知道不适合的菜单项。由于菜单项的宽度为99px并且400px您知道您只会显示 4 个项目。这个纯粹的 CSS 将隐藏其余部分：

.HeadMenu #nav > li:nth-child(n+5) {
    display:none;
}

然而，它至少需要 IE8 才能nth-child支持 CSS 选择器。

由于您在问题中提到了 jQuery，如果您需要支持 IE8，您可以在 JavaScript 中完成相同的操作：

$('.HeadMenu #nav > li:nth-child(n+5)').hide()

或者，保留 CSS 解决方案（因为它更简洁）并使用selectivizrnth-child为 IE8带来选择器支持。

Answer 2

如果您将样式更改为以下样式，我认为它可能会起作用：

.HeadMenu .HeadMenuMain
{
    display:block;
    position:relative;
    margin:0;
    width:400px;
    padding:0;
    direction:rtl;
    height:40px;
    white-space:nowrap; //will make elements stay on one row
}

.HeadMenu .HeadMenuMain li
{
    display:inline-block; //will make elements stay on one row with the nowrap
    list-style:none;
    position:relative;
}

http://jsfiddle.net/b5Wdc/2

Answer 3

在导航菜单中添加一个溢出：隐藏就可以了：

.HeadMenu #nav {
overflow: hidden;
}