无序列表徽章/计数标签

Question

在无序列表的右侧创建徽章/计数标签的最佳方法是什么，类似于Facebook（如下所示 - 消息旁边的徽章）：

理想情况下，我想在CSS中完全执行此操作而无需图像。我熟悉用相关的圆角半径等创建一个div以产生略微圆润的效果，但我不确定将元素放在右侧的最佳和最优雅的方法，并将其与列表项（用于CSS中的标识）。

提前感谢任何指导/协助。

Answer 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/

Answer 2

做这个小代码。要从列表元素中删除项目符号，请写入 ul li {list-style：none;}