Problem styling list items
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开发者_JAVA技巧 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!
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 )
精彩评论