How can I left-align the numbers in an ordered list?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Change the character after the number in an ordered list?
1) an item
Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.
I am mostly interested in answers that work on Firefox 3.
The CSS for styling lists is here, but is basically:
li {
list-style-type: decimal;
list-style-position: inside;
}
However, the specific layout you're after can probably only be achieved by delving into the innards of the layout with something like this (note that I haven't actually tried it):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
There is the Type attribute which allows you to change the numbering style, however, you cannot change the full stop after the number/letter.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
I suggest playing with the :before attribute and seeing what you can achieve with it. It will mean your code really is limited to nice new browsers, and excludes the (annoyingly large) section of the market still using rubbish old browsers,
Something like the following, which forces a fixed with on the items. Yes, I know it's less elegant to have to choose the width yourself, but using CSS for your layout is like undercover police work: however good your motives, it always gets messy.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
But you're going to have to experiment to find the exact solution.
The numbers line up better if you add leading-zeroes to the numbers, by setting list-style-type to:
ol { list-style-type: decimal-leading-zero; }
Sounds like you need to ditch the ordered list and use a table or something
This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li:before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}
-->
</style>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>
EDIT: Included multiple line fix by strager
Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.
Refer to list-style-type CSS property. Or when using counters the second argument accepts a list-style-type value. For example the following will use upper roman:
li:before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
The docs say regarding list-style-position: outside
CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.
Further up that page is the stuff about markers.
One example is:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Why don't you checkout this tutorial:
http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/
fwiw, the CSS property list-style-type (w3schools link) will change the list symbols - upper-alpha and upper-roman for the mentioned cases
I have it. Try the following:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>
The catch is that this definitely won't work on older or less compliant browsers: display: inline-block is a very new property.
Stole a lot of this from other answers, but this is working in FF3 for me. It has upper-roman, uniform indenting, a close bracket.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Cheers,
Steve
Borrowed and improved Marcus Downing's answer. Tested and works in Firefox 3 and Opera 9. Supports multiple lines, too.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
Quick and dirt alternative solution. You can use a tabulation character along with preformatted text. Here's a possibility:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
and your html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Note that the space between the li tag and the beggining of the text is a tabulation character (what you get when you press the tab key inside notepad).
If you need to support older browsers, you can do this instead:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>