Liste-stil - CSS-tricks

Anonim

Den list-styleegenskab er en forkortelse egenskab, der sætter værdier for tre forskellige liste-relaterede egenskaber i en erklæring:

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

Her er et eksempel på syntaksen:

ul ( list-style: square outside none; )

Hvilket ville være det samme som følgende langhåndsversion:

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

Kort sagt, hvis nogen værdier udelades, vender de tilbage til deres oprindelige tilstand.

Værdier for list-style-type

Den list-style-typeegenskab definerer typen af listen ved at sætte indholdet af hver markør, eller kugle, på listen. Acceptable søgeordsværdier for list-style-typeinkluderer:

  • 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 mere komplet liste. Værdier, der ikke var søgeord, blev introduceret i CSS3 og begynder at se en vis støtte, som:

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

Den følgende demo inkluderer en gruppe af ikke-ordnede lister, der viser hver søgeordsværdi:

Den list-style-typeegenskab gælder for alle lister, og at ethvert element, der er indstillet til display: list-item.

Listemarkørens farve vil være uanset elementets beregnede farve (indstillet via colorejendommen).

Værdier for list-style-position

De list-style-positionejendom definerer, hvor at placere listen markør, og det accepterer en af to værdier: insideeller udenfor. Disse demonstreres nedenfor med paddingfjernet fra listerne og en venstre rød kant tilføjet:

Værdier for list-style-image

Den list-style-imageegenskab bestemmer, om listen markør er sat med et billede, og accepterer en værdi på ”ingen” eller en URL, der peger på billedet:

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

Flere demonstrationer

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Arbejder Arbejder Arbejder Arbejder Arbejder Arbejder Arbejder

IE6 / 7 understøtter ikke alle nøgleordsværdier for list-style-typeog har også en fejl, hvor flydende listeelementer ikke viser deres listemarkør. Dette løses ved hjælp af et baggrundsbillede (i stedet for list-style-image) på listeelementerne.