html - 内部文本弄乱了内联块列表项的布局

Question

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

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

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

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

你只需要添加vertical-align:top;到li

于 2013-10-29T17:29:12.420 回答

score 1 · Accepted Answer

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

默认的垂直对齐值是基线，但是你想要顶部而不是这样它们正确对齐。

3 回答 3