Как создать: список групп

Узнайте, как использовать CSS для преобразования базового списка в «список групп».

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

Попробуйте сами

Как создать список групп

Первый шаг - Добавление HTML:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

Второй шаг - Добавление CSS:

ul {
  list-style-type: none; /* Удаление маркеров списка */
  padding: 0; /* Удаление внутреннего отступа */
  margin: 0; /* Удаление внешнего отступа */
}
ul li {
  border: 1px solid #ddd; /* Добавление тонкой рамки для каждого элемента списка */
  margin-top: -1px; /* Предотвращение двойной рамки */
  background-color: #f6f6f6; /* Добавление серого фона */
  padding: 12px; /* Добавление внутреннего отступа */
}

Попробуйте сами

Соответствующие страницы

Учебник:CSS список