<span>漂浮在里面</span> <li> <span>在FF中创建新行，但不在Chrome中创建新行</span>

Question

I'm using twitter-bootstrap for a menu and can't seem to figure out what's up with the message counter span I'm trying to get to float to the right – seems to work in Chrome (bottom) but shoots it down to a new line in FF (top). If I reduce width of the span to 0, it stays on same line, but then is off the edge of the menu.

Any suggestions would be much appreciated!

Here's the code: 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;}

^^ this is what's happening in the actual page – trying to get counter right aligned...

Answer 1

Remove the float:right; .

You could create the following css class:

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

etc.

If you were to align the text left, and the counter right.. I would create two inline div's and float one left, and the other right.