|
How do I set the position of list item markers?
Author: Deron Eriksson
Description: This CSS tutorial shows how the list-style-position property can be used to set the position of list item markers.
Tutorial created using:
Windows XP
The position of the list item markers in a list can be set to be inside or outside of the list's principal block box via the 'list-style-position' property. This property can have values of: outside, inside, and inherit. The effects of the 'outside' and 'inside' values for 'list-style-position' can be seen in the style-test.html file. style-test.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Style Test</title> <style type="text/css"> </style> </head> <body> <ul style="list-style-position: outside"> <li>This is the first item in the 'list-style-position: outside' list</li> <li>This is the second item in the 'list-style-position: outside' list</li> <li>This is the third item in the 'list-style-position: outside' list</li> </ul> <ul style="list-style-position: inside"> <li>This is the first item in the 'list-style-position: inside' list</li> <li>This is the second item in the 'list-style-position: inside' list</li> <li>This is the third item in the 'list-style-position: inside' list</li> </ul> </body> </html> The display of style-test.html in IE7 is shown here. Notice that for 'outside', the list item markers are outside of the list item content area, whereas for 'inside', the list item markers are within the list item content area so that the list item content wraps underneath the list item markers. 
Related Tutorials: |