3

私はこのようなcssを持っています:

.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}

そして、次のようなhtml：

<ul>
    <li class="done">Done</li>
    <li class="notdone">Not Done</li>
</ul>

IE6 と FF でうまく動作します。各 li 項目には、箇条書きのイメージが異なります。しかし、list-style-image に表示されるすべてのドキュメントには、ul タグに適用する必要があると書かれています。

私がやろうとしていることを行うための適切な、または標準に基づいた方法はありますか、それともこれですか?

編集: http://www.w3.org/TR/CSS21/generate.html

li タグで list-style-image を使用できないとは言っていないようですが、例ではそれが示されていません。

4

6 に答える 6

6

あなたが参照しているドキュメントは、箇条書きを特定の形式にしたいときだと思います。そのため、クラスは親タグに適用されます 

<ul>

そのような場合。それぞれに独自の弾丸を持たせたい2つの画像があるので、あなたがしていることに何の問題もありません

于 2009-04-09T17:03:17.420 に答える
5

CSS 2.1 標準では、が に直接適用される例が示さlist-styleliれています。

作成者は、リスト アイテム要素 (HTML の "li" など) に「リスト スタイル」情報を直接指定することもできますが、注意して行う必要があります。

に続く：

ol.alpha li   { list-style: lower-alpha } /* Any "li" descendant of an "ol" */ 
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */

したがって、CSS ルールのカスケードを注意して理解している限り、アイテムを直接適用list-style-typeまたはリストしても問題ないという結論を下します。list-style-image

于 2009-04-09T17:35:27.997 に答える
2

編集のフォローアップ...

CSSのデフォルト スタイル シートを見ると、li が次のように定義されていることがわかります。

li              { display: list-item }

あなたが提供したリンクでは、list-style-image は display: list-item を持つすべての要素で有効です。したがって、標準によれば、あなたがしていることは有効です。

于 2009-04-09T17:16:32.193 に答える
1

ブラウザからブラウザへのリスト画像の間隔に関して、矛盾に遭遇しました。その結果、私は通常、問題全体をスキップして、代わりに次のようにします。

li {list-style: none; padding-left: 15px;}    
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}

最終結果は、最初に意図したのと同じ画像を使用した弾丸になりますが、実際の配置と間隔をより細かく制御できます。おそらく微調整が必​​要ですが、それが一般的な考え方です。

于 2009-04-10T19:13:40.453 に答える
0

あなたがしていることに問題はありません。どのドキュメントについて話しているのですか？

于 2009-04-09T17:00:42.013 に答える
0

理論的には、リスト内のすべてのエントリは同じ箇条書きのスタイルを持ちます。これらのリストは歴史的に、どのレベルでも 1、2、3 または A、B、C を持つアウトラインのようなものに見られ、異なる序数タイプを互いに混ぜても意味がありません。あなたがスタイル的にしていることをすることに何の問題もないと思います。しかし、それが正しいCSSかどうかはわかりません。

于 2009-04-09T17:07:37.580 に答える