Китегории

Как изменить отступ слева от маркеров списка?

Главная » Рецепты CSS » Как изменить отступ слева от маркеров списка?
6 мая 2022
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Задать произвольное расстояние между маркерами списка и текстом справа от него.

Решение

Добавьте свойство margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding, как показано в примере 1.

Пример 1. Отступ слева от списка

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Отступ слева</title>
  <style>
   ul {
    padding: 0; /* Убираем поля */
    margin-left: 20px; /* Отступ слева */
   }
  </style>
 </head>
 <body>
  <hr />
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>
  <hr />
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Список сдвинут влево от своего исходного положения

Значение margin-left подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна браузера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Основное

HTML

CSS

Сайт

Статьи