css - Firefox:下拉列表中的 float 元素显示错误

Question

参见此处:codepen.io/arnaudfabs/pen/waXWJL 在这里输入代码

我正在使用 Zurb Foundation 5 构建一个大型菜单。我需要为每种产品在同一行中显示元素名称和价格。

我为价格添加了一个 span float right，它在 Chrome 和 IE 上显示良好。

在 Firefox 中，价格超出了 li 标签，甚至无法点击。

看图片:

好:

差:

有什么想法吗？谢谢!

Answer 1

在 .top-bar-section .dropdown li a 上删除样式 white-space: nowrap; 似乎可以解决您在 FireFox 中的问题。

或者像这样覆盖它:

.top-bar-section .dropdown li a{
    white-space: normal;
}