リストマーカー画像によるずれを防止

サンプルを見る

通常リストマークに画像をつけるなら、

li {
  list-style-image: url("画像のURI");
}

ですが、これだとリストマークの画像が上にずれてしまいます。

では、ずれないようにするにはどうすればよいか。

li {
  background: url("画像のURI") center left;
}

これできちんと真ん中に表示されるようになります。通常はこれで問題ありません。

ただ、ul/liタグが入れ子になってくると（下記(X)HTML例参照）、親リスト部分（下記例の場合はサンプル1とサンプル2）のリストマークの画像の位置がおかしくなります。

(X)HTML

<ul>
  <li>サンプル1
    <ul>
      <li>サブカテゴリ</li>
    </ul>
  </li>
  <li>サンプル2</li>
</ul>

CSS

li {
  background: url("画像のURI") 0 0.5em;
}

こうするとul/liが入れ子になってもきれいに画像が表示されます。

それとCSSでリストマークにbackgroundを使うと、IEではリストマークの画像が表示されなかったり、画像が途切れたり等、大変不安定です。

これを解消するには、ul要素にwidth属性を指定すると解決します。

サンプルを見る

2006-05-07 09:54 | CSS

Page Top