为什么（浮动）列表项转到下一行

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

Answer 2

第二个标记名称没有浮动空间，因此它会下降到下一行。

如果您给父母更多宽度，它将保持在同一行

Answer 3

它只是溢出，因为有太多的内容不适合父框。如果在Firefox浏览器中安装firebug，则可以非常轻松地检查这些内容。