css - li 标签内的 Firefox 奇怪行为右对齐跨度

Question

Firefox 弄乱了 li 中的 span 标签。 Chrome、Opera 和 IE 可以很好地正确显示格式。

我该如何解决。

这是我的代码:

<div class="navcontainer">
<div class="nav">
    <ul>
        <li><a href="#">Dropdown</a>

            <ul>
                <li><a href="#">One<span class="bubble-info">32</span></a>

                </li>
                <li><a href="#">Two<span class="bubble-warning">32</span></a>

                </li>
                <li><a href="#">Three<span class="bubble-danger">32</span></a>

                </li>
                <li><a href="#">Four<span class="bubble-success">32</span></a>

                </li>
                <li><a href="#">Five<span class="bubble-default">32</span></a>

                </li>
            </ul>
        </li>
    </ul>
</div>

这是我的 fiddle http://jsfiddle.net/TgD65/1/

Answer 1

其实很简单。当您将一个元素设置为 float 时，您需要将它放在另一个元素之前。

浏览器首先放置 float 元素，然后放置其余元素。

所以在你的 li 中，如果你有:

<a href="#"><span class="bubble-info">32</span>One</a>

它适用于所有浏览器。

http://jsfiddle.net/TgD65/5/