0

Facebook と同様に、順序付けられていないリストの右側にバッジ/カウント ラベルを作成する最良の方法は何ですか (以下に表示 - Messagesの横のバッジ):

ここに画像の説明を入力

理想的には、画像を必要とせずに、これを完全に CSS で行いたいと考えています。少し丸みを帯びた効果を与えるために、関連する角の半径などでdivを作成することに慣れていますが、要素を右側に配置し、それを特にそれに関連付ける最善かつ最もエレガントな方法がわかりませんリスト項目 (CSS での識別目的)。

ガイダンス/支援をよろしくお願いします。

4

2 に答える 2

1

このようなもの：

HTML:

<ul>
    <li>Item <span>3</span></li>
    <li>Item <span>3</span></li>
    <li>Item <span>3</span></li>
    <li>Item <span>3</span></li>
    <li>Item <span>3</span></li>
    <li>Item <span>3</span></li>
</ul>

CSS:

li {
    background: #eee;
    padding: 0.5em;
    width: 300px;
}

span {
    background: #ccc;
    display: block;
    float: right;
    padding: 0 0.5em;
}

デモ: http://jsfiddle.net/sBJ8y/

于 2013-04-03T09:32:06.827 に答える
0

この小さなコードを実行するだけです。リスト要素から箇条書きを削除するには、
ul li{ list-style:none;} と記述します。

于 2013-04-03T09:48:11.270 に答える