Як змінити відступ зліва від маркерів списку?

23.09.2010

Влад Мержевич

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.

Значення margin-left обирається експериментально з урахуванням власних уподобань. Допускається також використання від'ємної величини, проте пам'ятайте, що маркери та текст можуть в цьому випадку "з'їхати" за межі вікна браузера.

списки

Завдання

Рішення

Часті запитання