javascript - "Priority Nav"在 div float 时中断

Question

我正在使用“优先导航”设计模式。对于那些不太确定这是什么的人，基本上当视口(viewport)宽度减小并且没有足够的空间让所有列表项水平固定时，它们会被移动到另一个嵌套列表中，因此仍然可以访问它们.这是在列表末尾的“更多”链接中。

在基本层面上，这在我的示例(如下)中运行良好:

http://codepen.io/moy/pen/RrRJBe

我遇到的问题是:

1) 因为我在导航旁边还有另一个元素，它是 float 的(并且宽度未知)，我需要在导航上设置 overflow:hidden;。这意味着当容器的宽度发生变化时，导航会保持在其他内容旁边，而不是放在下一行。它修复了......问题是它还意味着末尾的下拉菜单不可见，因为它显示在导航下方并且 overflow: hidden; 已设置。

对此有任何替代 (CSS) 修复吗？

2) 另一个问题是导航链接需要放在右边。没问题，只需将 div float 即可，是吗？不幸的是，它不喜欢这样，页面几乎崩溃了——一定是与试图计算宽度的脚本有关吗？一旦导航或其父级 float ，它就会中断!

列表项向左浮动，因此它们水平显示。相反，我尝试使用 display: inline-block 和 text-align: right;。这样可以正确定位文本，但是当没有足够的水平空间时，元素要么换行，要么全部折叠到“更多”链接中，而不是一个接一个。

-

浏览器要求: 值得注意的是，我的浏览器支持 IE8+，因此不幸的是 flexbox 不可用。即使它有效，也意味着我必须找到 IE8/9 的修复程序。

有没有人能帮忙解决这个问题，或者我应该看看有没有插件。当导航被隔离时，这个脚本工作得很好，但是一旦另一个元素在它的路径中，它就会变得有点棘手。在之前的尝试中，我得到了挡道的元素的宽度，并将其减去可用空间。但这不是那么灵活/可扩展 - 但同样，也许没有其他方法？

谢谢，希望有人能帮忙!

Answer 1

第 1 部分

您可以使用 clearfix 代替 overflow: hidden。

将以下内容添加到包含 nav 的父元素中:

.wrap:before, .wrap:after {
    content: '';
    display: table;
    clear: both;
}

但是如果你需要支持IE8，你可以在包含nav的父元素底部添加如下元素即可

html
<div class="clear"></div>

.clear {
    clear: both;
}