Liststil - CSS-tricks

Anonim

Den list-styleegenskapen är en förkortning egenskap som sätter värden för tre olika listrelaterade fastigheter i ett uttalande:

ul ( list-style: || || ; )

Här är ett exempel på syntaxen:

ul ( list-style: square outside none; )

Vilket skulle vara detsamma som följande långhandversion:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Kort sagt, om några värden utelämnas kommer de att återgå till sitt ursprungliga tillstånd.

Värden för list-style-type

Den list-style-typeegenskapen definierar vilken typ av listan genom att ställa in innehållet i varje markör, eller kula, på listan. Acceptabla sökordsvärden för list-style-typeinkluderar:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN har en mer fullständig lista. Icke-sökordsvärden introducerades i CSS3 och börjar se lite stöd, som:

ul ( list-style-type: "→"; )

Följande demo innehåller en grupp oordnade listor för att visa varje nyckelordsvärde:

Den list-style-typeegenskapen gäller för alla listor och alla element som är inställd på display: list-item.

Listmarkörens färg är oavsett vilken beräknad färg som elementet har (ställs in via coloregenskapen).

Värden för list-style-position

De list-style-positionfastighets definierar var att placera listan markören, och det tar en av två värden: insideeller utanför. Dessa visas nedan med paddingborttagningen från listorna och en vänster röd kant tillagd:

Värden för list-style-image

Den list-style-imageegenskapen avgör om listan markören ställs in med en bild och accepterar ett värde av ”none” eller en webbadress som pekar på bilden:

ul ( list-style-image: url(images/bullet.png.webp); )

Fler demonstrationer

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Arbetar Arbetar Arbetar Arbetar Arbetar Arbetar Arbetar

IE6 / 7 stöder inte alla nyckelordsvärden för list-style-typeoch har också ett fel där flytande listobjekt inte visar sin listmarkör. Detta löses genom att använda en bakgrundsbild (istället för list-style-image) på listobjekten.