« 入門オブ入門マリオ | メイン | Google Image で顔検索 »

list-style-image の画像のズレを修正

CSS で <li> タグに list-style-image プロパティを使用してリストマークを画像にした場合

li {
    list-style-image: url(image.gif);
}

画像と文字がズレてしまいます。
IE だと FireFox に比べると 2 ,3 ピクセルほどさらにズレてしまいます。

このズレを直すのに、下記の様に background プロパティで画像を指定する方法に変更すると、位置を揃えて表示することができます。

li {
    padding-left: 12px;
    background: url(image.gif) no-repeat 10px 0.5em;
    list-style: none;
}

padding の値は、使用する画像に合わせて調整してみください。

Category: CSS   Tag: CSS

Sponsor Link