Узнать, как создать группу списков с значками, используя HTML, 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 и их стилизации.