Jak utworzyć: lista grupowa

Naucz się, jak używać CSS do przekształcenia podstawowej listy w "listę grupową".

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

Spróbuj sam

Jak utworzyć listę grupową

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

ul {
  list-style-type: none; /* Usuń punkty listy */
  padding: 0; /* Usuń wewnętrzny margines */
  margin: 0; /* Usuń zewnętrzny margines */
}
ul li {
  border: 1px solid #ddd; /* Dodaj cienką krawędź do każdego elementu listy */
  margin-top: -1px; /* Zapobiegaj podwójnym ramkom */
  background-color: #f6f6f6; /* Dodaj szary kolor tła */
  padding: 12px; /* Dodaj trochę wewnętrznego marginesu */
}

Spróbuj sam

Strony związane

Tutorial:CSS lista