リストマーカーの表示位置を揃える

リストマーカーを好きなものに変えたいときは、<li>に下のように背景画像を指定してあげればいい。

li{
background:url(image-path) left center no-repeat;
}

<li>が1行の時には全然問題ないけど、<li>が2行になったときに2行になったリストの真ん中にリストマーカーが表示されてしまうのがすごくイヤなんです…。
リストマーカーは1行目の先頭についていて欲しい！

で、これを実現するためにはどうしましょ？を解決するために、背景画像の上からの位置をpx単位で決めちゃえばいい。
上から4pxがちょうどいい位置だと仮定すると、

li{
background:url(image-path) left 4px no-repeat;
}

でオッケー！と思いきや、この指定の仕方だとNetScape7で表示がおかしくなるようで…。
leftと指定している部分を0pxに変更すればこのバグは回避できるそうです。

px指定じゃなくて、0%なんかでも大丈夫みたいです。
例えば、

li{
background:url(image-path) 0% 4px no-repeat;
}

なんていう指定でもバグは出ない。要は、leftなどの指定と数値の指定を組み合わせると出現するバグのようです。
ネスケ７のシェア自体は大したことないかもしれないけど、この方式で指定してデザインに問題が出ないようならちゃんと指定しておきたいなと思います。

関連投稿

• 背景画像付きのボックス
  category: css tags: css.
• cssでグラフを描く
  category: css tags: css.

posted on 2008.06.23 12:53am