如何 - 帶有徽章的列表組
瞭解如何使用 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 列表以及如何設定其樣式。
