CSSのコーディングで悩んでいます。olの数字の左にリストマーク画像をつけたいのですが、どのようにしたら良いでしょうか。

Question

60

80pt

以下のようにしたいです。宜しくお願いします。

■1.テキストテキストテキストテキスト
■2.テキストテキストテキストテキスト
　　テキストテキストテキストテキスト
■3.テキストテキストテキストテキスト

回答の条件

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません

goodvn · Answer 1 · 2008-12-22T13:08:51+09:00

GIF などの画像でよいのでしょうか？

li {
  padding: 0px 0px 0px 20px;
  background-image: url(li.gif);
  background-repeat: no-repeat;
}

こんな感じで如何ですか？数値などは適宜調整してください

goodvn · Answer 2 · 2008-12-22T14:24:49+09:00

ブラウザにもよると思うのですが，margin や padding あたりは，IE では怪しい挙動をするので，きっとそのせいですね

上位の ol の margin や padding を適切に設定した上で，background-positon をマイナスで指定してやると，うまくいくかもしれません

コメント欄を開けておいていただけると助かります

takabi · Answer 3 · 2008-12-22T14:57:15+09:00

リストスタイルを内側にすれば大丈夫だと思います

li {

background-image: url(li.gif);

background-position: 0px center;

background-repeat: no-repeat;

list-style-position: inside;

padding-left: 10px;

}

回答（3件）