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列表项上的结束锚标记。有问题的行应为：

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

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

1 个答案: