title: Left align both list numbers and text
body: <p>I'd like to left align both the numbers and the text in my <code>&lt;ol&gt;</code>. This is what I'm trying to accomplish:</p>
  
  <p><img src="https://i.stack.imgur.com/654ik.png" alt="enter image description here"></p>
  
  <p>For now, each <code>&lt;li&gt;</code> contains an <code>&lt;a&gt;</code>, but that can change. So far I tried putting left padding and then a text-indent on the <code>&lt;a&gt;</code>. </p>
  
  <p>Here is my code as of now.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ol class="dinosaurs"&gt;
      &lt;li&gt;&lt;a&gt;Dinosaur&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Tyrannosaurus&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Camptosaurus&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dinosaurs{
      list-style-position: inside;
  }
  </code></pre>
  
  <p>NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.</p>