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

解決済

質問者：keeeeeeeen
質問日時：2010/04/11 01:24
回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： include_ab
回答日時：2010/04/11 02:55

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

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

- 0
- 件

通報する

この回答へのお礼

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にはマーカー画像ファイル横幅より少し大きめの値をピクセルで指定します。この値を調整することによってマーカー画像とテキストの間隔を調整できます。
　

- 0
- 件

通報する

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