FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-------- --:-- | スポンサー広告

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

サンプルを見る

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

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

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。