如何在 html 中的列表内容及其编号之间保持单独的 alignment 将列表样式位置保留在内部？

Question

我有以下列表及其样式

ol {
  background: #ff9999;
  padding: 20px;
  list-style-position: inside;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

我正在尝试将所有列表编号保留在列表项中，以便数字应与所有编号保持左对齐，问题是由于此文本现在已包装并且与列表项编号对齐，我想要该文本应该与自身对齐，而不是与数字对齐。 怎么做？

以下是截图，可以看到文本过长时没有对齐

Answer 1

这个 CSS 可以正常工作：

 ol { border: solid 20px #ff9999; background: #ffe5e5; padding: 10px; list-style: none; counter-reset: count; } ol li { padding: 5px; counter-increment: section; display: flex; } ol li:before { content: counter(section) "."; min-width: 30px; }

 <ol> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Libero, facere ex voluptatem aspernatur,</li> <li>Quis magnam. voluptates error sunt,</li> <li>Nesciunt dolor? deleniti repudiandae iusto,</li> <li>Dolorem ea alias, sapiente hic?</li> <li>Rem sit. error ex. Maxime,</li> <li>Itaque commodi odit maxime pariatur,</li> <li>Aliquid odio cum vitae animi,</li> <li>Ipsa? ex, Ullam. ipsa, laboriosam.</li> <li>Culpa nemo illum, deleniti itaque.</li> <li>Velit similique incidunt placeat ducimus!</li> <li>Sit vel perspiciatis, voluptas itaque.</li> </ol>

Answer 2

这里是 go：

 ol { background: #ff9999; counter-reset: foo; display: table; padding: 20px; } ol>li { background: #ffe5e5; counter-increment: foo; display: table-row; } ol>li::before { content: counter(foo) ". "; display: table-cell; text-align: left; /* change this for number alignment right/left. */ padding-right:5px; /* Increase this for space between number and text.*/ }

 <ol> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>