Menu
I am trying to create an ordered numbered list where the background color alternates. I need the numbers to appear inside the background, as well as line up. If I take out list-style-position:inside; the numbers line up, but move outside the background.
Here's my code, with a link to jsfiddle below.
<ol>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
<li class="alt">ha HA ha HA!</li>
<li>ha HA ha HA!</li>
</ol>
ol
{
list-style-type:decimal;
list-style-position:inside;
margin:1.5em;
}
.alt
{
background-color:#ccc;
}
http://jsfiddle.net/kwgpf/
667
You can use list-style: inside; to align the numbers. the initial value is set to outside, but i have the feeling firefox set it to inside by default. Anyway, this property gives you control of position the bullets/numers from your list.
To make a right-aligned version of the list, only three changes need to occur. First, set the "UL" "text-align" to "right". Second, change the left "background-position" from "0" to "100%" - which makes the image align up with the right edge. And finally change "padding-left" to "padding-right".
To center align an unordered list, you need to use the CSS text align property. In addition to this, you also need to put the unordered list inside the div element. Now, add the style to the div class and use the text-align property with center as its value. See the below example.
You shoud use:
list-style: decimal inside none;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
