title: Aligning numbers inside an HTML Ordered List
body: <p>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 <code>list-style-position:inside;</code> the numbers line up, but move outside the background. </p>
  
  <p>Here's my code, with a link to jsfiddle below. </p>
  
  <pre><code>&lt;ol&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li class="alt"&gt;ha HA ha HA!&lt;/li&gt;
      &lt;li&gt;ha HA ha HA!&lt;/li&gt;
  &lt;/ol&gt;    
  
  ol
  {
      list-style-type:decimal;
      list-style-position:inside;
      margin:1.5em;
  }
  .alt
  {
      background-color:#ccc;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kwgpf/">http://jsfiddle.net/kwgpf/</a></p>