Default list formating

  • List item one
  • Another list item
  • Next in here
  • The final item
  1. List item one
  2. Another list item
  3. Next in here
  4. The final item

Default list formating (visually)

  • List item one
  • Another list item
  • Next in here
  • The final item
  1. List item one
  2. Another list item
  3. Next in here
  4. The final item

Where is the list's margin and padding?

ul { padding-left:40px; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { padding-left:0; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { padding:1em 0; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { padding:0; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { margin-left:40px; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { margin-left:0; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { margin:1em 0; }

  • List item one
  • Another list item
  • Next in here
  • The final item

ul { margin:0; }

  • List item one
  • Another list item
  • Next in here
  • The final item

Getting it consistent among browsers

Notice: All of the following examples use an additional CSS identifier ul.normal and ol.normal, which for you should be simply ul and ol.

CSS:

/* Used by IE7, but wont't 
   harm anybody else. */
body { min-height:0; }

ul, ol { 
   margin:auto -3em 1em 0; 
   padding:0; 
   position:relative; 
   left:-3em;
   overflow:hidden;
}

ul ul, ul ol, 
ol ol, ol ul { 
   margin-left:1em; 
   padding-left:0; 
}

ul li, ol li { 
   margin-left:5em; 
}

li li { 
   margin-left:1em; 
}

ul, ol { 
   /* Apply only (!) 
      to IE6 */
   height:0;
   overflow:visible;
}

Normal unordered list

  • This is very useful for list items which are in fact paragraphs and contain a lot of text:
    • First item inside
    • Second item inside
  • Another list item a b c d e f g h i j k l m n o
  • Next in here
  • The final item

Normal ordered list

  1. This is very useful for list items which are in fact paragraphs and contain a lot of text:
    1. First item inside
    2. Second item inside
  2. Next in here
  3. The final item

CSS:

.flat li { 
   margin-left:3em; 
}

.flat li ul, .flat li ol { 
   margin-left:1em; 
   padding-left:0; 
}

.flat li li { 
   margin-left:0; 
}

Flat unordered list

  • This is very useful for list items which are in fact paragraphs and contain a lot of text:
  • Another list item with letters inside:
    • First item inside
    • Second item inside
  • Next in here
  • The final item

CSS:

In addition to .flat style:

.spaced { 
   margin-bottom:0; 
}

.spaced ul, .spaced ol { 
   margin-top:1em; 
}

.spaced li { 
   margin-bottom:1em; 
}

Flat and "spaced" unordered list

  • This is very useful for list items which are in fact paragraphs and contain a lot of text:
  • Another list item with letters inside.
  • Final item on the list.

CSS:

Note: don't forget to remove the line break after list-style-image: to get it work.

ul.bullet-a li { 
   list-style-image: 
   url('bullet-image-a.png');  
}

ul.bullet-b li { 
   list-style-image: 
   url('bullet-image-b.png'); 
}

.indent li { 
   padding-left:1em; 
   text-indent:-1em; 
}

.inside li { 
   list-style-position:inside; 
}

.clear li { 
   list-style-type:none; 
}

Unordered list with image bullets normal

  • This is very useful for list items which are in fact paragraphs and contain a lot of text:
    • First item inside
    • Second item inside
  • About the credit cards and mortage payments;
  • Final item on the list.

Unordered list with image bullets flat

  • This is very useful for list items which are in fact paragraphs and contain a lot of text:
  • About the credit cards and mortage payments;
    • First item inside
    • Second item inside
  • Final item on the list.

Unordered list with image bullets flat and spaced

  • This is very useful for a a a list which are in fact paragraphs and contain a lot of text;
  • About the credit cards and mortage payments;
    • First item inside
    • Second item inside
  • Final item on the list.

Final examples

Simple list

  • This is very useful for a a a list which are in fact paragraphs and contain a lot of text;
    • First item inside
    • Second item inside
  • About the credit cards and mortage payments;
  • Final item on the list.

Normal spaced ordered list

  • This is very useful for list items which are in fact paragraphs and contain a lot of text:
    • First item inside
    • Second item inside
  • Next in here
  • The final item

Unordered list with image bullets normal

  • This is very useful for a a a list which are in fact paragraphs and contain a lot of text;
    • First item inside
    • Second item inside
  • About the credit cards and mortage payments;
  • Final item on the list.

Unordered list with image bullets flat and spaced

  • This is very useful for a a a list which are in fact paragraphs and contain a lot of text;
  • About the credit cards and mortage payments;
    • First item inside
    • Second item inside
  • Final item on the list.

Unordered list with image bullets flat and spaced

  • This is very useful for a a a list which are in fact paragraphs and contain a lot of text;
  • About the credit cards and mortage payments;
    • First item inside
    • Second item inside
  • Final item on the list.

Flat and indented unordered list

Be sure to take the following things with you:

  • passport (valid upon 3 month from now) or other ID,
  • printed airplane ticket,
  • hotel confirmation.

Clear unordered list

Be sure to take the following things with you:

  • passport (valid upon 3 month from now),
  • printed airplane ticket,
  • hotel confirmation.

Unordered list with list bullet inside

Be sure to take the following things with you:

  • passport (valid upon 3 month from now),
  • printed airplane ticket,
  • hotel confirmation.

Example of an article

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In gravida. Maecenas libero ligula, aliquet a, consequat at, dignissim vitae, eros. Vestibulum posuere urna sed turpis. Cras vulputate tortor sed libero. Nam nulla. Ut et purus id erat mattis nonummy.

Duis ultrices eleifend ipsum. Pellentesque eget odio. Donec lobortis. Aenean viverra, arcu sed interdum rhoncus:

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Morbi nunc augue, mattis quis, lacinia in, blandit id, neque. Curabitur cursus magna et massa. Nullam quis sem. Mauris aliquam elementum libero. Maecenas laoreet. Nulla pellentesque tincidunt massa. Mauris at augue ut tellus tincidunt porta.

Sed sed quam in magna bibendum ullamcorper. Vestibulum posuere pede non felis. Quisque gravida iaculis sapien.

  1. Vivamus odio ipsum, luctus ac, gravida eget, lacinia sit amet, magna. Praesent convallis augue non lectus.
  2. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent sollicitudin quam.
  3. Sed sodales mi et pede. Phasellus ultricies urna. Pellentesque lobortis. Fusce pellentesque porta lorem.

Maecenas nunc ipsum, tincidunt a, luctus id, volutpat sed, orci. Maecenas aliquam. Donec fringilla aliquet risus. Nullam a elit non tellus molestie ullamcorper. Proin porta rhoncus dolor. Morbi rutrum. Aliquam id metus sed purus blandit sollicitudin.

Vestibulum molestie, tellus ac pretium accumsan, lacus tellus aliquet nulla, vel commodo ligula ligula sit amet mi. Cras enim lacus, rhoncus vel, molestie tincidunt, ornare at, pede. Sed sapien erat, adipiscing sed, facilisis vel, sollicitudin ut, velit. Nullam quis nulla. Curabitur ligula metus, viverra sed, feugiat ut, porttitor dignissim, erat. Aenean rutrum enim in odio. Sed faucibus dapibus mi. Etiam dapibus. Ut varius lectus in purus. Cras tellus magna, placerat quis, eleifend sit amet, pharetra eget, nunc. Nullam viverra leo id arcu. Mauris eu urna.