Cannot get badge to line up with link in navbar

Question

I am having trouble figuring out how to get a badge next to a link in my navbar and have it line up correctly.

<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Link</a><span class="badge badge-important">4</span></li>

Here is a JSFiddle example of my problem: http://jsfiddle.net/pHRc9/3/

Answer 1

Try putting the close of the a href outside of the span close.

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link <span class="badge badge-important">4</span></a></li>

Updated Answer

You didn't specify that in your question. Using the code you have already existing, and placing this css worked okay for me.

a {
    float:left !important;
}
span {
    float: left !important;
    margin-top: 10px;
}

Answer 2

Not sure why you would want the badge outside the link as the entire link becomes a block. The best way to have the badges to the right is similar to lostintranslation's answer, but instead of using .badge-important use .pull-right.