CODEWITHSUNDEEP
css
Jiew Meng
Jiew Meng

Reputation: 88189

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><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

Upvotes: 1

Views: 5661

Answers (3)

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 5

larsson
larsson

Reputation: 11

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.

Upvotes: 0

nunopolonia
nunopolonia

Reputation: 14417

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

Upvotes: 0

Related Questions