如何 - 列出带有徽章的组

了解如何使用 CSS 创建带有徽章的列表组。

列出带有徽章的组

收件箱2
其他5
已保存
东西
老的

如何创建列表组

步骤1）添加HTML：

示例

<ul>
<li>Inbox <span class="badge">2</span></li>
<li>Other <span class="badge">5</span></li>
<li>Saved</li>
<li>Stuff</li>
<li>Old</li>
</ul>

步骤2）添加CSS：

示例

/* Transform a basic list into a customized list group */
ul.list-group {
list-style-type: none;
padding: 0;
margin: 0;
}

ul.list-group li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
}

/* Style badges inside the list group */
ul.list-group .badge {
background-color: red;
color: #fff;
font-weight: bold;
border-radius: 50%;
padding: 5px 10px;
text-align: center;
margin-left: 5px;
}

亲自试一试 »

提示：去我们的CSS 列表教程了解有关 HTML 列表以及如何设置其样式的更多信息。