Question

我正在使用＆＃34;优先导航＆＃34;设计模式。对于那些不太清楚这是什么的人来说，基本上当视口宽度减小并且没有足够的空间让所有列表项水平修复时，它们会被移动到另一个嵌套列表中所以他们仍然可以访问。这是在＆＃34;更多＆＃34;链接在列表的末尾。

在基本级别，这在我的示例（下面）中工作正常：

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

我遇到的问题是：

1）因为我在导航旁边有另一个项目，它是浮动的（宽度未知），我需要在导航栏上设置overflow:hidden;。这意味着当容器的宽度发生变化时，导航将与其他内容并排放置，而不是下降到下一行。它修复了......问题是它还意味着结尾的下拉列表不可见，因为它显示在导航下方并设置了overflow: hidden;。

任何其他（CSS）修复此问题？

2）另一个问题是导航链接需要定位在右侧。没问题，只是将div漂浮，是吗？不幸的是，它并不喜欢这样，页面几乎崩溃 - 必须与试图计算宽度的脚本有关吗？一旦导航或它的父母浮动，它就会中断！

列表项向左浮动，因此它们水平显示。相反，我尝试使用display: inline-block和text-align: right;。这样就可以正确定位文本，但是如果没有足够的水平空间，那么这些项目要么包裹，要么全部折叠到＆＃34;更多＆＃34;链接而不是一个接一个。

-

浏览器要求：值得注意的是，我的浏览器支持是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;
}

＆＃34;优先导航＆＃34; div浮动时中断

1 个答案: