<span>在<li>中浮动，在FF中创建新行但在Chrome中</li> </span>

Question

我正在使用twitter-bootstrap作为菜单，似乎无法弄清楚消息计数器跨度是什么，我试图向右浮动 - 似乎在Chrome（底部）工作但射击它下到FF的新行（上）。如果我将跨度的宽度减小到0，它将保持在同一条线上，但随后离开菜单的边缘。

任何建议都会非常感谢！

以下是代码：http://codepen.io/anon/pen/lGeJz

<ul class="dropdown-menu">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Messages<span class="counter">(306)</span></a></li>
    <li><a href="#">Account</a></li>
    <li><a href="#">Logout</a></li>
</ul>

CSS: .counter {float: right;}

^^这就是实际页面中发生的事情 - 试图让计数器右对齐......

Answer 1

删除float:right;。

您可以创建以下css类：

.dropdown-menu span.counter {
    position:relative;
}

等

如果要将文本左对齐，右边的计数器对齐..我会创建两个内联div并向左浮动一个，另一个向右浮动。