Style an ordered list so the number appears left-aligned and above the item?
Question
I thought this would be an easy thing, but I haven't found a good solution (maybe I'm also using the wrong search terms).
I would like to style an ordered list so the items appear so:
1
Item one
2
Item two
3
Item three
Is there any way to do this simply with CSS?
Many thanks in advance!
5 answers
solution1
3 2010-10-18 08:37:14
You can try along the line of:
<style>
ol {
list-style-position: inside;
padding-left: 0;
}
</style>
<ol>
<li> <div>foobar</div></li>
<li> <div>wah la</div></li>
</ol>
It works on FF and Chrome, but I don't have IE on my current machine to try.
solution2
2 2010-10-18 08:30:36
AFAIK, CSS does not allow you to have a lot of control regarding the position of the list-item relative to the "bullet" (or number or whatever)... So it might be a better idea to generate the numbers directly in the HTML , on server-side, or on client-side via Javascript...
Nevertheless , the following works (at least in Firefox), but is rather ugly (with that br in the middle :-/ )
<html>
<head>
<style type="text/css">
li > p{
margin-left:-30px;
margin-top:-10px;
}
</style>
</head>
<body>
<ol>
<li><br/><p>item 1</p></li>
<li><br/><p>item 2</p></li>
</ol>
</body>
</html>
The idea is to force the content of the list-item to be on another line with a br , and then, on the content, apply some negative margins to move it where you want to... This is certainly not a nice solution ... in addition, I think that each browser may generate the "list-index" in its way, so there would be no nice way to have it work on all browsers ...
solution3
2 ACCPTED 2010-10-18 08:33:08
You can use the content property with the :before pseudo-element and the \a newline escape:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL Test</title>
<style type="text/css">
li:before {
content: "\a";
white-space: pre;
}
</style>
</head>
<body>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
</body>
</html>
That should work fine on browsers that support CSS 2.1.
solution4
1 2015-09-08 15:37:14
I know this question is really old, but I ended up finding it when searching for the same answer, and these answers provided didn't quite do what I needed it to do. I had also just learned this really cool technique using the "counter" in CSS.
ol { /* Remove default numbers */ list-style: none; counter-reset: item; } ol li { /* Increment the counter for this element */ counter-increment: item; /* Style the vertical spacing as needed */ display: block; margin: 1em 0; } ol li:before { /* Add the numbers as content in the before pseudo */ content: counter(item); /* Continue styling as needed, changing, fonts, position, etc. */ display: block; margin-bottom: 1em; }
<ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
solution5
0 2010-10-18 09:16:27
Does it absolutely have to be an ordered list?
If you are dynamicaly generating the content, then you could always output the numbers yourself, and then format the markup however you like - rather than trying to coerce the browser by doing something 'clever', simplify the situation by doing someting 'smart'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.