Cómo crear: grupo de lista con placa

Aprende a crear un grupo de lista con placa usando CSS.

Cómo crear un grupo de lista

Primer paso - Añadir 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>

Segundo paso - Añadir CSS:

/* Convertir una lista básica en un grupo de lista personalizado */
ul.list-group {
  list-style-type: none;
  padding: 0;
  margin: 0;
{}
ul.list-group li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Evitar marcos dobles */
  background-color: #f6f6f6;
  padding: 12px;
{}
/* Establecer el estilo de la placa de la lista de grupo */
ul.list-group .badge {
  background-color: red;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  padding: 5px 10px;
  text-align: center;
  margen-izquierdo: 5px;
{}

亲自试一试

相关页面

教程：CSS 列表