Why is (floated) list item going to next line

I have

<footer class="meta">
  <ul>
    <li><a href="#" class="numNotes">3 notes</a></li>
    <li>开发者_如何学JAVA<a href="#" class="numComments">10 comments</a></li>
    <li><a href="#" class="datePosted">3rd Feb 2011</a></li>
    <li class="tags">
      <ul>
        <li><a href="#">Tag name</a></li>
        <li><a href="#">Tag name</a></li>
      </ul>
    </li>
  </ul>
</footer>

I am wondering why my last tag item goes to the next line

http://jiewmeng.kodingen.com/demos/folio-wip/index.html

You could try to enforce a one-line display, by adding:

li.tags,
li.tags > ul {
    white-space: nowrap;
}

As others have pointed out, however, it drops to the next line due to width of the content being greater than the width of the parent element.

Having played around with this, it turns out that, for white-space: no-wrap; to work, you'd also need to use display: inline; (or display: inline-block;) on the li elements.

JS Fiddle demo.

The second tag name doesn't have space to float so it drops to the next line.

If you give the parent li more width it will stay on the same line

It's just overflowing since there's too much content to fit in the parent box. You can very easily check these things if you install firebug in your Firefox browser.