Positioning with absolute positions as percentages is putting things at a weird place

I'm trying to make labels on my tick marks on a HTML5 range input.

My attempt looks like this (JSFiddle):

<div style="height: 20px; width: 100%;">
  <span style="position: absolute; left: 0%; text-align: center;">0.01</span>
  <span style="position: absolute; left: 9.90991%; text-align: center;">1</span>
  <span style="position: absolute; left: 19.9199%; text-align: center;">2</span>
  <span style="position: absolute; left: 27.027%; text-align: center;">e</span>
  <span style="position: absolute; left: 29.9299%; text-align: center;">3</span>
  <span style="position: absolute; left: 39.9399%; text-align: center;">4</span>
  <span style="position: absolute; left: 49.9499%; text-align: center;">5</span>
  <span style="position: absolute; left: 59.96%; text-align: center;">6</span>
  <span style="position: absolute; left: 69.97%; text-align: center;">7</span>
  <span style="position: absolute; left: 79.98%; text-align: center;">8</span>
  <span style="position: absolute; left: 89.99%; text-align: center;">9</span>
  <span style="position: absolute; left: 100%; text-align: center;">10</span>
</div>
   <input type="range" list="ticks" min="0" max="100" style="width: 100%;">
   <datalist id="ticks">
      <option>
         0
      </option>
      <option>
         9
      </option>
      <option>
         19
      </option>
      <option>
         27
      </option>
      <option>
         29
      </option>
      <option>
         39
      </option>
      <option>
         49
      </option>
      <option>
         59
      </option>
      <option>
         69
      </option>
      <option>
         79
      </option>
      <option>
         89
      </option>
      <option>
         100
      </option>
   </datalist>
</div>

I would expect that my spans would line up with the ticks on my range slider. However, they don't.

The misalignment seems to be in the labels, not the range input. When I inspect the elements in my Chrome inspector, the spans look like they're in the wrong place, even though their parent div looks like it has the right width.