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;
}