0

我的清单有问题。我已将 awhite-space: nowrap;和 a放在它们所属的位置，但由于某种原因，列表项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: "#"; }
4

1 回答 1

0

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

<li class="notes"><i class="icon-heart"></i> <a href="#" title="notes">904 notes</a></li>
于 2012-08-03T22:52:03.880 回答