css - 为什么列表项不遵循内联 CSS 规则？

Question

我的列表有问题。我已经放置了一个 white-space: nowrap; 和一个 display: inline; 它们所属的位置，但由于某种原因 之后仍然有一个换行符notes 列表项。输出如下所示:

4 Months Ago    904 Notes
Laughing Squid    laughingsquid

什么时候应该是这样的:

4 Months Ago    904 Notes    Laughing Squid    laughingsquid

我不知道是什么导致了中间奇怪的换行。任何有助于澄清问题并纠正问题的帮助都很棒。

HTML:

<div class="meta">
<ul>
    <li class="date"><i class="icon-time"></i> <a href="http://creativeplayground.tumblr.com/post/19181776541/laughingsquid-tifa-the-cat-thinks-shes-a-dog" title="Creative Playground">4 months ago</a></li>
    <li class="notes"><i class="icon-heart"></i> <a href="http://creativeplayground.tumblr.com/post/19181776541/laughingsquid-tifa-the-cat-thinks-shes-a-dog#notes" title="Creative Playground">904 notes</li>
    <li class="source"><i class="icon-info-sign"></i> <a href="http://laughingsquid.com/tifa-the-cat-thinks-shes-a-dog/" title="Laughing Squid">Laughing Squid</a></li>
    <li class="reblog"><i class="icon-retweet"></i> <a href="http://links.laughingsquid.com/post/19181722635/tifa-the-cat-thinks-shes-a-dog" title="laughingsquid">laughingsquid</a></li>
</ul>
<hr class="spacer">
<ul class="tags">
    <li class="tags"><i class="icon-tags"></i></li>
    <li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/fancy-tag" title="fancy tag">fancy tag</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/sample-tage" title="sample tage">sample tage</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-1" title="tag 1">tag 1</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-2" title="tag 2">tag 2</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-3" title="tag 3">tag 3</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-4" title="tag 4">tag 4</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-5" title="tag 5">tag 5</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-6" title="tag 6">tag 6</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-7" title="tag 7">tag 7</a></li><li class="tag"><a href="http://creativeplayground.tumblr.com/tagged/tag-8" title="tag 8">tag 8</a></li>
</ul>
</div>

CSS:

.meta {
    width: 110%;
    margin: 5px -8px -8px -8px;
    padding: 5px;
    background-color: rgba(255,255,255,0.8);
    box-shadow: inset -5px 1px 5px #555;
    font-size: 10pt;
    color: #555;
}
.meta a:link, .meta a:visited { color: #555; }
.meta > ul, ul.tags { display: inline; list-style: none; margin: 0; }
.meta > ul > li, li.tag { display: inline; margin: 0 8px 0 0; white-space: nowrap; }
li.tag:before { content: "#"; }

Answer 1

感谢@Zeta 指出这一点，但答案很简单。我在 notes 列表项上缺少一个结束 anchor 标记。有问题的行应为:

<li class="notes"><i class="icon-heart"></i> <a href="#" title="notes">904 notes</a></li>