CSSでliのマーカーの位置を変更したいです。

CSSでliのマーカーの位置を変更したいです。
liのマーカーをlist-style-imageで変更したのですが、文字とマーカーの差ができてしまいます。
そこでこのマーカーの位置をテキスト側（右側）に寄せたいのですが、うまくいかなく、困っています。

No.1 ベストアンサー 回答者： include_ab 回答日時： 2010/04/11 02:55

list-style-positionでリストボックスに内包するかしないかは指定できます。

が、見た感じそういった事ではなさそうですね。
リストマーカを画像にしているようなので、
その画像自体の左側に余白を作れば、ある程度右に寄せる事は可能かと思います。
文字とマーカの差というのがよくわかりませんので、中途半端な解答ですが、ご容赦ください。

この回答へのお礼

insideにしたらうまくいきました!!ありがとうございます!!

お礼日時：2010/04/12 21:01

No.3 回答者： scorpion2009 回答日時： 2010/04/11 11:59

＞マーカーの位置をテキスト側（右側）

これは画像(マーカー)をテキストの後ろに表示したいと言うことなのか、あるいは画像(マーカー)をテキストの前に表示したいのだが、マーカーとテキストの間隔が広いので、それを縮めたいだけなのかが文面からはよく分かりません。
　後者ならば、list-style-imageよりも、backgroundで指定した方が良さそうです。
たとえば、
［HTML］
<li>目次１</li>
［CSS］
li{ padding-left: XXpx; background: white url(marker.gif) no-repeat left center; }

marker.gifがマーカー画像ファイル、XXにはマーカー画像ファイル横幅より少し大きめの値をピクセルで指定します。この値を調整することによってマーカー画像とテキストの間隔を調整できます。
　

No.2 回答者： zeff#1 回答日時： 2010/04/11 11:52

マーカーを背景画像にしたほうが良いです。

１回のみの表示にしてpadding-leftを取って文字と重ならないようにする。
画像を表示させない環境からは消えてしまいますが、
細かい位置指定は可能になりますし、
複数行になった場合にも先頭行の頭に固定できます。

ul{
list-style-type:none;
}
ul li{
background-image: url(マーカーのURL);
background-repeat: no-repeat;
background-position: 左からの位置px 上からの位置px;
padding-left:適当な間隔px;
}

マークに画像を使用する際の別の方法
http://www.webword.jp/cssdetail/list/index5.html