Firefox：下拉列表中的浮动元素显示错误

Question

看这里：codepen.io/arnaudfabs/pen/waXWJLenter code here

我正在使用 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;
}