内部文本搞乱了内联块列表项的布局

Question

我在这里创建了一个jsfiddle，这样你就可以看到发生了什么：http://jsfiddle.net/QcRvz/1/

基本上，我有一个无序列表，列表项显示为内联块：

<ul id="folders">
    <li></li>
    <li><span>Test</span></li>
    <li></li>
    <li></li>
</ul>

出于某种原因，如果我在列表项中输入文本或任何内容，则会混淆该列表项的上边距。

谁能看到这里发生了什么？

Answer 1

将vertical-align设置为top（或bottom等）：

ul#folders li
{
    /* ... */
    vertical-align: top;
}

http://jsfiddle.net/QcRvz/2/

默认值为baseline，如果有任何文字，它会对齐文本的基线而不是框本身。

Answer 2

将vertical-align:top;添加到列表项的CSS规则中。

<强> jsFiddle example

默认的垂直对齐值是基线，但是您需要顶部，以便它们正确对齐。

Answer 3

See this jsFiddle (updated from your link)

您只需将vertical-align:top;添加到li的

即可