如何在 html 中保持列表内容与其编号之间的单独对齐，使列表样式位置保持在内部？

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

给你：

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>

如何在 html 中保持列表内容与其编号之间的单独对齐，使列表样式位置保持在内部？

How to keep separate alignment between the list content and its numbering in html keeping list-style-position to inside?

html

javascript

css

stylesheet