CSS, отступы HTML-списка

Поскольку текст каждого элемента в вашем примере содержится в span, вы можете стилизовать каждый диапазон.

Например, я добавил padding-left: 30px в первый элемент вашего кода: https://jsfiddle.net/02xbseuo/

Это будет первая строка текста. Если вы хотите использовать весь абзац, вы можете преобразовать элементы span в div.

Используйте правило text-indent следующим образом (см. Также мой слегка измененный JSFiddle:

<style type = "text/css">
  li {
    padding-right: 5px;
  }
</style>

Тег style принадлежит к разделу head (я поместил свой в строку 20 скрипки, которую я связал).

Я бы рекомендовал добавить класс к вашим элементам li, чтобы вы могли изменять только те элементы, которые вам нужны, а не элементы всеli на странице.

Кроме того, вы не спрашивали об этом, но в целом я бы рекомендовал избегать встроенных стилей. Когда ваши страницы становятся больше, их становится очень трудно поддерживать, а изменение каждого встроенного стиля займет гораздо больше времени и может привести к дополнительным ошибкам.

С помощью полей и отступов вы можете получить нужный отступ. Я использовал 10 пикселей, но вы можете указать любое значение, необходимое для вашего решения.

HTML код

<ol> <li>element 1 </li> <li>element 2</li> <li>element 3 </li> <li>element 4</li> </ol>

Код CSS

ol li {margin-left: 10px; padding-left: 10px;}

Вы можете увидеть этот образец в JSFiddle