html - 无序列表徽章/计数标签

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;}