<span> 浮动在 <li> 中，在 FF 中创建新行，但在 Chrome 中没有答案

【问题标题】：<span> floated inside <li> creates new line in FF but not in Chrome<span> 浮动在 <li> 中，在 FF 中创建新行，但在 Chrome 中没有
【发布时间】：2014-08-06 14:17:37
【问题描述】：

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

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

【问题讨论】：

你为什么需要一个浮点数？ Span 默认是内联的。
bootstrap 将white-space: nowrap; 添加到.dropdown-menu > li >a。删除它会在 FF 中修复它。
@j08691 我添加了一个屏幕截图来说明实际页面上发生的情况。
@Paulie_D 如果我使用空格：正常，它会折叠菜单中的所有多字行

标签： css twitter-bootstrap google-chrome firefox css-float

【解决方案1】：

删除float:right;。

您可以创建以下 css 类：

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

等等

如果你要让文本左对齐，计数器右对齐。我会创建两个内联 div，一个左浮动，另一个浮动。

【讨论】：