Есть ли способ показать текстовый отступ, когда позиция стиля списка находится «внутри»?

Question

li {
  margin: 0;
  line-height: 32px;
  list-style-position: inside;
  text-indent: 3em;
}

<ul><li>list</li></ul>

Вот как отображается список:

---

Here is the result what I want:

введите описание изображения здесь

Поскольку я хочу, чтобы 'номер заказа' был выровнен с содержимым, я установил list-style-position: inside;.

Но этот стиль приводит к тому, что text-indent действует для 'порядка -number 'тоже.

Есть ли способ сделать text-align эффективным для' порядкового номера ', но text-indet недействительным?

Или мне нужно изменить способ реализации это?

Спасибо за помощь!

Answer 1

Вот соответствующие CSS:

ol
{
  margin-left: -3ex;
}

li
{
  padding-left: 3em;
}

Рабочий пример см .: https://jsfiddle.net/2adnfp86/

Обратите внимание: номера для заказа верны. выровнен. И они могут увеличиваться. Поэтому вам нужно убедиться, что маржа ol соответствует вашим потребностям.