Как сохранить отдельное выравнивание между содержимым списка и его нумерацией в html, сохраняя позицию list-style-position внутри?

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

Здесь вы 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>

Answer 2

Это 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>