人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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


●質問者: kanigasuki
●カテゴリ:ウェブ制作
✍キーワード:CSS OL コーディング テキスト マーク
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● goodvn
●9ポイント

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


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

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

http://q.hatena.ne.jp/1229913525

◎質問者からの返答

ありがとうございます。

残念ながら画像を数字の左に出す事は出来ませんでした。

以下のようになります。

1.■テキストテキストテキスト

2.■テキストテキストテキスト

3.■テキストテキストテキスト


2 ● goodvn
●27ポイント

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

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

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

http://q.hatena.ne.jp/1229913525

◎質問者からの返答

background-positionをマイナス指定は画像が表示されなくなりました。


3 ● takabi
●44ポイント

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

li {

background-image: url(li.gif);

background-position: 0px center;

background-repeat: no-repeat;

list-style-position: inside;

padding-left: 10px;

}

◎質問者からの返答

ありがとうございます。

list-style-position: inside;

を使ってうまく表示できました。

ただ改行したとき1行目にそろってほしかったので、insideで内側にしたのを、ふたたびtext-indentをマイナス指定で揃えました。

li {

padding-left: 70px;

background:url(li.gif) no-repeat;

list-style-position:inside;

text-indent:-30px;

}

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ