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

質問

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

回答No.1

include_ab · ベストアンサー

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

お礼

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

回答No.3

scorpion2009

＞マーカーの位置をテキスト側（右側）
これは画像(マーカー)をテキストの後ろに表示したいと言うことなのか、あるいは画像(マーカー)をテキストの前に表示したいのだが、マーカーとテキストの間隔が広いので、それを縮めたいだけなのかが文面からはよく分かりません。
　後者ならば、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

マーカーを背景画像にしたほうが良いです。
１回のみの表示にして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