CSS выравние текста внутри списка <ol>

Рейтинг: 0Ответов: 3Опубликовано: 05.08.2025

проблема такая:

создаю нумерованный список, в списке оформление цифр специфическое

вот css, html:

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}
<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

получается вот это:

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

подскажите как исправить перенос, как сделать отступ, чтобы текст был выровнен по левой границе

css html выравнивание
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Можно через padding весь текст подвинуть вправо, а первую строку через text-indent на столько же обратно влево.

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
  text-indent: -60px;
  padding-left: 60px;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-indent: 0;
}
<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

▲ 0

Так как теперь счетчик расположен внутри списка его можно вынести за границу контейнера с помощью отрицательного margin

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px 10px -50px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}
<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

▲ 0

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

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
  position: relative;
  padding-left: 60px;
  margin: 30px 0;
}

li:before {
  position: absolute;
  left: 0;
  top: -18px;
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}
<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>