Float:none 在我的响应式设计中不起作用

Question

我先暂时打开这个直播网址，不然这个问题就太难解释了：

[测试网址关闭]

请在支持媒体查询的浏览器中打开它，并将浏览器的大小调整为移动设备，视口宽度约为 400 像素或更低：

您可以（应该）看到，全局导航菜单中的“标签”选项是可见的、处于活动状态的并且与右侧对齐。这可以正常工作，并通过将其浮动到右侧来完成：

.nav-option-active { @include inline-block; float:right; }

（注意：我使用的是 SASS，因此使用了 @include 语法）

到目前为止，一切都很好。但是，随着视口的增长，有更多空间可用于显示导航选项，包括此活动选项和其他选项，因为它们通常应该出现。有可用空间，它们不应该漂浮。当您将视口调整为更大的尺寸时，您可以看到其他导航选项的工作原理：

见上文。全局导航选项显示为未浮动，但它们应该显示为未浮动，但活动导航选项（在本例中为标签链接）保持浮动到右侧。我想要在更大的视口中做的就是撤消该浮动，以便链接将表现为内联块，未浮动，并像其他链接一样出现在标记中。我的尝试如下：

.nav-option-active, .nav-option-active a, .nav-option-active a em { float:none; }

请注意，代码有点绝望，实际上应该只在 .nav-option-active 元素上设置 float:none。

正如您已经从屏幕截图中看到的那样，浮动并没有撤消，我不知道为什么。在 Firebug 中，我看到确实应用了 float:none，并且 float:right 被删除，被 float:none 否决。所以肯定应用了CSS，但没有效果。 Clear:both 也没有效果，尽管我认为这不是正确使用的属性。奇怪的是，如果在 Firebug 中我实际上在运行时摆脱了浮动规则，就会实现所需的行为。

我有一种感觉，我忽略了一些非常基本的东西或误解了一些基本的东西，那么一旦设置了浮动，我该如何撤消？

Answer 1

您的其他列表项向左浮动。你也需要把那个浮起来。