如何 - 带徽章的列表组
了解如何使用 CSS 创建带有徽章的列表组。
带有徽章的列表组
- 收件箱 2
- 其他 5
- 已保存
- 东西
- 旧的
如何创建列表组
步骤 1) 添加 HTML
示例
<ul>
<li>收件箱 <span class="badge">2</span></li>
<li>其他 <span class="badge">5</span></li>
<li>已保存</li>
<li>东西</li>
<li>旧的</li>
</ul>
步骤 2) 添加 CSS
示例
/* 将基本列表转换为定制的列表组 */
ul.list-group {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.list-group li {
border: 1px solid #ddd;
margin-top: -1px; /* 防止双边框 */
background-color: #f6f6f6;
padding: 12px;
}
/* 样式列表组内的徽章 */
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 列表及其样式设置的信息。
