Как сохранить отступ для второй строки в списке CSS

Быстрый ответ

Для выравнивания второй и последующих строк нумерованных списков рекомендуется использовать CSS. Присвойте тегу <ol> свойство list-style-position: inside;. Для тега <li> добавьте свойство padding-left, чтобы создать отступ, а затем свойство text-indent с отрицательным значением для выравнивания текста:

ol {
  list-style-position: inside;
  padding-left: 30px; /* Установка отступа */
}

li {
  text-indent: -30px; /* Коррекция отступа */
}

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

Пользовательская нумерация и выравнивание

Пользовательская нумерация с применением счётчиков

Для повышения стилистической целостности ваших списков используйте CSS-счётчики. Свойства counter-reset и counter-increment позволят вам контролировать нумерацию и сохранять отступы во вложенных списках:

ol {
  counter-reset: list-counter; /* Начальное значение счётчика */
}

li {
  counter-increment: list-counter; /* Увеличение значения счётчика */
  list-style-type: none; /* Отключение стандартной нумерации */
}

li:before {
  content: counter(list-counter) ". "; /* Добавление номера перед элементом */
  text-align: right; /* Выравнивание номера по правому краю */
  margin-right: 5px; /* Установка отступа между номером и текстом */
}

Таким образом, у вас станет в полном распоряжении контроль над нумерацией!

Подробнее об этом расскажет наш спикер на видео

Выравнивание справа для длинных последовательностей номеров

Для сохранения выравнивания в списках с номерами разной длины рекомендуется применять комбинацию text-align: right; и display: table-cell;. Это позволит создать элегантный вид списка с нумерацией, выровненной по правому краю:

li {
  display: table-cell; /* Эмуляция поведения ячейки таблицы */
  text-align: right; /* Выравнивание содержимого по правому краю */
  padding-right: 10px; /* Отступ для предотвращения слияния текста с номерами */
}

С уважением к старому: совместимость с IE8

Чтобы обеспечить правильное отображение на старых версиях браузеров, например, IE8, используйте псевдоэлемент :before с list-style: none; в <ol>. Это гарантирует корректный отступ второй строки даже в этих браузерах:

ol {
  list-style: none; /* Отказываемся от обычных меток */
}

li:before {
  content: counter(list-counter) ".";
  counter-increment: list-counter;
  /* Стилизация для совместимости с IE8 */
}

Добро пожаловать в клуб ценителей антиквариата!

Визуализация

Представьте выставленные на полке ряд книг:

1. 📕 HTML Гайд
2. 📗 CSS Гайд
   📘 JavaScript Гайд (Выделяется)
3. 📙 Python Гайд

Визуализируйте прозрачную линейку, которая поможет выровнять вторую строку текста:

1. 📕 HTML Гайд
2. 📗 CSS Гайд
   📏 --------------------------------------------------
   📘 JavaScript Гайд
3. 📙 Python Гайд

С использованием CSS мы можем достичь этого эффекта:

li {
  text-indent: -1em; /* Шаг назад */
  margin-left: 1em;  /* Регулирование выравнивания */
}

Теперь список выглядит аккуратно и единообразно отформатированным.

Улучшение с помощью flexbox/grid

Желаете добиться большего? Примените Flexbox или Grid для усовершенствования выравнивания списка. Эти инструменты расположения позволяют создать гибкий и адаптивный интерфейс:

ol {
  display: flex;
  flex-direction: column; /* Вертикальное расположение элементов */
}

li {
  display: flex; /* Подготовка к гибким возможностям */
}

Теперь списки словно гимнасты — идеально выстроены в ряд!

Использование CSS-переменных

Сделайте стилизацию списков проще при помощи CSS-переменных:

:root {
  --indent-size: 30px; /* Определение переменной */
}

ol {
  padding-left: var(--indent-size); /* Применение переменной */
}
li {
  text-indent: calc(var(--indent-size) * -1); /* Корректировка отступа */
}

С небольшим колдовством в CSS ваши списки приобретут вполне согласованный вид!

Анимированные списки

Добавьте динамики, применяя изящную CSS-анимацию или переходы :

li {
  transition: transform 0.3s ease; /* Плавное перемещение элемента списка при взаимодействии */
}

li:hover {
  transform: translateX(10px); /* Горизонтальное перемещение при наведении */
}

Используя анимацию с умеренностью, вы сможете достичь идеального акцента при взаимодействии с пользователем.

Полезные материалы

1. W3C: Спецификация CSS Counter Styles Уровень 3 — информация о CSS-счётчиках по стандартам W3C.
2. Can I use: Таблица совместимости для проверки поддержки свойства list-style-type CSS — сервис для проверки совместимости браузеров .
3. CSS Portal: Объяснение свойства list-style-position — детальное разъяснение свойства list-style-position.
4. Codrops: Справочник CSS по свойству List-Style — комплексное руководство по свойству list-style в CSS.
5. Smashing Magazine: Руководство по продвинутому CSS: Начало — введение в продвинутые селекторы CSS.
6. A List Apart: CSS Design: Приручение списков — подробное изучение CSS-стилизации списков.