Question

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

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

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

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

无论如何，谢谢大家。

Answer 1

如果您将样式更改为以下内容，我认为它可能有用：

.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 2

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

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

但是nth-child CSS选择器支持需要至少IE8。

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

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

或者，保持CSS解决方案（因为它更干净）并使用selectivizr将nth-child选择器支持带到IE8。

Answer 3

添加溢出：隐藏到导航菜单中可以解决这个问题：

.HeadMenu #nav {
overflow: hidden;
}

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

3 个答案: