Lists

Basic Construction

Unordered Lists

<ul>
	<li>OS X</li>
	<li>Windows</li>
	<li>Linux</li>
</ul>

Apply the list-style-type property to the <ul> tag to change the type of list. Valid values are: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.

Ordered Lists

<ol>
	<li>January</li>
	<li>February</li>
	<li>March</li>
</ol>

In the example below, the Second Quarter starts with letter d because the <li> tag was written as: <li value="4">

<h4>First Quarter</h4>
<ol>
	<li>January</li>
	<li>February</li>
	<li>March</li>
</ol>
<h4>Second Quarter</h4>
<ol>
	<li value="4">April</li>
	<li>May</li>
	<li>June</li>
</ol>

First Quarter

January
February
March

Second Quarter

April
May
June

Alternatively, you can use the start attribute on the <ol> tag. Before you use either the start attribute or value attribute on the <li> tag, are you sure you need to? See the next section on List Items.

<h4>First Quarter</h4>
<ol>
	<li>January</li>
	<li>February</li>
	<li>March</li>
</ol>
<h4>Second Quarter</h4>
<ol start=4>
	<li>April</li>
	<li>May</li>
	<li>June</li>
</ol>

First Quarter

January
February
March

Second Quarter

April
May
June

List Items

In most cases, the content inside the list item (<li>) tag will simply be text, as shown above. However, you can put most anything inside a list item. For example:

Milk

Please get 1%.
Cheese
Make sure you get the good stuff, not that crappy mass-produced junk.
Perhaps something from Wisconsin, eh?
Pretzels

<ul style="max-width:500px;">
	<li>
		<p>Milk</p>
		<p>Please get 1%.</p>
	</li>
	<li>
		<img src="cheese-illustration.png" width="131" height="100" class="pushRight">
		<p>Cheese</p>
		<p>Make sure you get the good stuff, not that crappy mass-produced junk.</p>
		<p>Perhaps something from Wisconsin, eh?</p>
	</li>
	<li>Pretzels</li>
</ul>

Advanced Formatting

A List Apart has a great article on formatting lists.

Horizontal Positioning

The most common thing you may need to do is adjust the margins and padding to move your list from its default location. Browsers have different default methods for indenting the list; either padding-left or margin-left depending on the browser.

This is a floated box.

Short item 1
Short item 2
This is a much longer item so we can see how wrapping affects it. I always like to see the text aligned flush left and the markers aligned right.

The obvious problem is the the markers are spilling outside the intended area. That's because, by default, the marker (bullets) are set to display on the outside of the margin. This is done explicitly with CSS property li { list-style-position:outside; }

Solution

This is a floated box. Notice how the list flows nicely around this box.

Short item 1
Short item 2
Short item 3
Short item 4
This is a much longer item so we can see how wrapping affects it. I always like to see the text aligned flush left and the markers aligned right.
This is a much longer item so we can see how wrapping affects it. I always like to see the text aligned flush left and the markers aligned right.
This is a much longer item so we can see how wrapping affects it. I always like to see the text aligned flush left and the markers aligned right.
This is a much longer item so we can see how wrapping affects it. I always like to see the text aligned flush left and the markers aligned right.

The fix is to slide the list over to the right and reduce its width by an equal amount.

ul.listFix, ol.listFix {
	margin:1em 0;
	padding:0;
}
.listFix li {
	position:relative;
	left:2.5em;
	margin-right:2.5em;
}

Markers

You can place the markers outside or inside the list using CSS property list-marker-position. For example:

This list has the markers positioned outside the normal flow. This is the
default (standard) way of doing things.

list-marker-position

You can use the list-marker-position property to set the bullets or numbers inside the normal flow, however I have never come across a situation yet where list-marker-position:inside is the best solution. Go with "the Solution" above instead.

This list has the markers positioned inside the normal flow.
The only time you would ever want to do this is if you can guarantee the width of your marker.
Then you can hack together some nice alignment with negative text-indent and an equal but positive left margin.
Like this bullet. I applied style="list-style-position:inside; text-indent:-1em; margin-left:1em;"
It works reasonable well full bullets, but sucks for numbers (ordered lists).