html - インライン ブロック リスト項目のレイアウトを台無しにする内部テキスト

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 の例

デフォルトの垂直方向の位置合わせの値はベースラインですが、適切に位置合わせするために代わりに上部が必要です。