CSS liste

Uordnet liste:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Ordnet liste:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTML-lister og CSS-listegenskaber

I HTML findes der to hovedtyper af lister:

  • Uordnet liste (ul) - listenemner er markeret med punkttegn
  • Ordnet liste (ol) - listenemner er markeret med tal eller bogstaver

CSS-listegenskaber giver dig mulighed for:

  • Indstil forskellige listenemneindstillinger for ordnet liste
  • Indstil forskellige listenemneindstillinger for uordnet liste
  • Indstil billede som listenemne
  • Tilføj baggrundsfarve til liste og listenemne

Forskellige listenemneindstillinger

list-style-type Egenskaben bestemmer typen af listenemne.

Følgende eksempel viser nogle tilgængelige listenemneindstillinger:

Example

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

Try it yourself

Bemærk:Nogle værdier bruges til uordnede lister, mens andre bruges til ordnede lister.

Billede som listenemne

list-style-image Egenskaben angiver et billede som listenemne:

Example

ul {
  list-style-image: url('sqpurple.gif');
}

Try it yourself

Positioner listenemne

list-style-position Egenskaben bestemmer placeringen af listenemne (punkttegn).

"list-style-position: outside;" betyder, at punkttegnene for listen vil være uden for listenemne. Listenemnerne vil være vertikalt centreret på hver linje. Dette er standard:

  • Coffee - A brewed beverage made from roasted coffee beans
  • Tea
  • Coca-cola

"list-style-position: inside;" This indicates that the bullet will be inside the list item. Since it is part of the list item, it will become part of the text and push the text at the beginning:

  • Coffee - A brewed beverage made from roasted coffee beans
  • Tea
  • Coca-cola

Example

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Try it yourself

Remove default settings

list-style-type:none These properties can also be used to remove markers/bullets. Note that lists also have default margins and padding. To remove this content, add margin:0 and padding:0 :

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Try it yourself

List - Shorthand Property

list-style This is a shorthand property. It is used to set all list properties in one declaration:

Example

ul {
  list-style: square inside url("sqpurple.gif");
}

Try it yourself

When using shorthand properties, the order of the property values is:

  • list-style-type(If the list-style-image is specified, this property value will be displayed if the image cannot be displayed for some reason)
  • list-style-position(Specify whether the list item marker should be displayed inside or outside the content flow)
  • list-style-image(Specify the image as the list item marker)

If one of the above property values is missing, the default value for the missing property (if any) will be inserted.

Set list color styles

We can also use color settings to style lists to make them more interesting.

Any style added to the <ol> or <ul> tags will affect the entire list, while properties added to the <li> tags will affect individual list items:

Example

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Result:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Try it yourself

More examples

Custom list with red left border
This example demonstrates how to create a list with a red left border.
Full screen width border list
Dette eksempel viser, hvordan man opretter en kantet liste uden punkter.
Alle forskellige listeemne markører
Dette eksempel viser alle forskellige listeemne markører i CSS.

Alle CSS listeegenskaber

Egenskab Beskrivelse
list-style Kortform. Sæt alle listens egenskaber i én deklaration.
list-style-image Bruger et billede som markering for listeemner.
list-style-position Definerer placeringen af markeringen for listeemner (punkter).
list-style-type Definerer typen af markering for listeemner.