CSS - list-item (list formatting)

About

This page is about the formatting of element seen as a list-item.

A list-item has:

  • a principal block box (the normal box)
  • and an additional box known as the marker box (the marker).

Properties

All properties applies to the marker box.

The list properties applies only if the display property is set list-item.

This is the default value of a li html element.

The CSS properties 1) used to design an element as a list item are:

The shorthand list property is list-style 2)

Marker

Icon

The marker may be replaced with a before content property

Example:

  • Css:
ul {
  list-style-type: none;
}
ul > li:before {
  content: "- ";
}
  • Html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
  • Output:

Position: Outside / Inside the box

list-style-position specify if the marker is outside or inside the box. Values may be:

  • outside (default)
  • inside
  • inherit

Position: Horizontally

You can position the marker horizontally with the text-indent property

ul {
   text-indent: 10em;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Numbering

You can add numbers to your list with:

Default HTML with the ol element

With ordererd list (ol element) that sets the property list-style-type by default to decimal

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

With the list-style-type

With an upper romain ordererd list (ol element) that sets the property to list-style-type to decimal

ol {
  list-style-type: upper-roman
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

With a counter

With a counter, you can ever go further

ol {  counter-set: my-counter-name; }
li { display: block; }
li::before { content: counter(my-counter-name, upper-roman) ". "; counter-increment: my-counter-name }
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

How to create a numbered list with a div element

Div as list element

You can use a div element as list container and list item element.

.list-item {
  display: list-item;
  list-style-type: upper-roman;
}
<ol>
  <div class="list-item">One</div>
  <div class="list-item">Two</div>
  <div class="list-item">Three</div>
</ol>

Div as list container

The only drawback is that you can't place the marker outside because there is no marker box when using a div element as list container

.list-item {
  display: list-item;
  list-style-position: inside;
  list-style-type: upper-roman
}
<div>
  <div class="list-item">One</div>
  <div class="list-item">Two</div>
  <div class="list-item">Three</div>
</div>

Support

List and Float





Discover More
Firebug Display
CSS - (Display property|Box Type)

The display property defines the box model (layout) type. inline: Default value. Displays an element as inline element. Rules in the user agent's default style sheet may override this value block...
CSS - Block Box Layout

CSS - Block Box Layout CSS Block are box that can be seen as stacked element (such as paragraphs, section, ...) Block boxes: * create a block formatting context (layout) * and are involved in any...
HTML - Li element (list item)

li is an element that represents a single item in a. ordered: ol list or unordered: ul list This example shows a ordered list If you want to select a li list item, you need to use a child pseudo-selector...
How to use CSS Counter ?

css supports counter variable that can be used in a property value (for instance in a content property to add numbering to: heading or list For instance: We create two counters: one for...



Share this page:
Follow us:
Task Runner