Как изменить отступ слева от маркеров списка?
| 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. Отступ слева от списка
HTML5CSS 2.1IECrOpSaFx
<!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 подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна браузера.
