我看到了很多复杂的答案，而解决方案却很简单：

ol {
 list-style-position: inside; /* this is what you need*/
 
 padding: 0;
}

<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

CSS counters可能是一个不错的选择，support可以一直追溯到IE 8：

/* Just to generate all the elements we need */

const ol = document.querySelector('ol');

for (let i = 1; i < 10001; i++) {
  const li = document.createElement('li');
  if (Math.log10(i) % 1) {
    li.textContent = 'x';
  } else {
    li.textContent = 'Left-aligned.'
  }
  ol.appendChild(li);
}

ol {
  counter-reset: list;
  list-style: none;
}

li {
  counter-increment: list;
}

li::before {
  content: counter(list) '. ';
}

/* Demo only */
ol {
  overflow: auto;
  max-height: 300px;
}

<ol>
</ol>