8

順序付けられていないリストのアイテムの表示方法をカスタマイズしたいと思います。

、、、およびその他の多かれ少なかれサポートされている値list-style-typeを変更するために使用できることを知っています。また、画像をプロパティに指定するリスト マーカーのデフォルトの外観を変更できることも知っています。nonedisccirclesquarelist-style-image

問題は、と三角形の画像の組み合わせを使用する代わりに、箇条書きをlarge right arrow(►, ) HTML 特殊文字に置き換えたいことです。►list-style-image

出来ますか？ところで、これが問題になる場合、jQuery は既にページに読み込まれているため、これが役立つ場合は使用しても問題ありません。

4

4 に答える 4

22

私の知る限り、list-style-typeプロパティを使用してそれを行うことはできません。

ただし、ブラウザーが:before CSS セレクターをサポートしている場合は、それを使用してリスト項目の前に黒丸エンティティを挿入できます。エンティティ コードを 16 進数に変換するだけです。

ul {
    list-style-type: none;
}

li:before {
    content: "\25ba\00a0";
}

これを示す jsFiddle はこちらにあります。

于 2011-04-11T09:18:00.270 に答える
5

@Frederic は、IE6 および 7 をサポートする必要がない限り、私が使用する興味深い回避策を示しています。その場合、文字を含む通常の HTML 要素を使用して回避する必要があり、スタイルを設定して適切な場所。

何かのようなもの

ul { list-style-type: none } /* Adjust margin and padding as you see fit */
ul li div.bullet { float: left; width: 30px; margin-right: 12px }

<li>
 <div class="bullet">&#9658;</div>
 List item 1
</li>
于 2011-04-11T09:11:46.253 に答える
2

時間がかかりましたがlist-style-type: <string> 、Chromium に到着しました。

スタイルシートがリスト スタイル マーカーに任意の文字を使用できるようにします。

于 2019-12-06T22:30:22.810 に答える