ansaurus

Question

Style an ordered list so the number appears left-aligned and above the item?

Answer 1

+2 A:

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 ...

tsimbalar 2010-10-18 08:30:36

Answer 2

+1 A:

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"&gt;
<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.

Frédéric Hamidi 2010-10-18 08:33:08

Thanks for all the incredibly prompt and useful responses, I opted for this solution as it allowed the list item to be clean of anything but the intended content. It works perfectly for me in Chrome/Firefox. Alas, haven't tested IE yet. (will report back when I do)

waffl 2010-10-18 09:21:02

Answer 3

+2 A:

You can try along the line of:

<style>
    ol {
      list-style-position: inside;
      padding-left: 0;
    }
</style>

<ol>
    <li>&nbsp;<div>foobar</div></li>
    <li>&nbsp;<div>wah la</div></li>
</ol>

It works on FF and Chrome, but I don't have IE on my current machine to try.

動靜能量 2010-10-18 08:37:14

Answer 4

A:

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'

belugabob 2010-10-18 09:16:27

ansaurus

tags:

views:

answers:

Style an ordered list so the number appears left-aligned and above the item?

related questions