Question

I’m trying to style an ordered list that seemed quite simple but apparently is harder than I thought, what I need to do is to separate every item with a white border below, the problem is the the “bullet” or “list number” is not part of the li element so the border gets placed below the text only, here’s an image of what I mean:

http://www.diigo.com/item/image/1j40h/5eni

I’m trying to find a way to make the bottom border span across the whole border but I haven’t been able to, I though about adding a verticaly repeated background to the ol but if the text takes more than one line it won’t work, my last resort was to use a ul without bullets and have the user type the number himself that what it’d be part of the li but this doesn’t sound very user friendly 🙁

Can anyone help me? Thanks in advance!

Answer 1

Use list-style-position CSS property for your ol element:

ol
{
    list-style-position: inside;
}

It will make your bullets part of the displayed list item content. This is all in accordance with CSS 2.1 specification ( http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position )