为什么(浮动)列表项转到下一行

Question

我有

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

我想知道为什么我的最后一个标签项目转到下一行

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

Answer 1

您可以尝试通过添加以下内容来强制执行单行显示:

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

然而,正如其他人所指出的那样,由于内容的宽度大于父元素的宽度,它会下降到下一行.

事实证明,为了white-space: no-wrap;工作,你还需要在元素上使用display: inline;(或display: inline-block;)li.

JS小提琴演示.