css - float 在 内，在 FF 中创建新行，但在 Chrome 中不创建新行

Question

我正在使用 twitter-bootstrap 作为菜单，但似乎无法弄清楚消息计数器跨度是怎么回事我正试图向右浮动 – 似乎在 Chrome 中工作(底部)但是射击它下降到 FF 中的新行(顶部)。如果我将 span 的宽度减小为 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，一个左浮动，另一个右浮动。