Как изменить точки у li css

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:

   Она выглядит вот так:

2. Текстовая ссылка:

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   

От автора: теперь легко настроить цвет, размер или тип числа или маркера при использовании <ul> или <ol>. Благодаря Igalia, спонсируемой Bloomberg, мы наконец-то можем убрать хаки для стилей списков. Судите сами!

Благодаря CSS ::marker мы можем изменять содержимое и некоторые стили маркеров и чисел.

Совместимость с браузерами

Когда выйдет Chromium 86, ::marker будет поддерживаться в Firefox для настольных компьютеров и Android, Safari для настольных ПК и iOS Safari, а также в браузерах для настольных ПК и Android на базе Chromium. См. обновления в таблице совместимости браузеров MDN.

Псевдо-элементы

Рассмотрим следующий маркированный список HTML:

В результате получается следующий неожиданный рендеринг:

Точка в начале каждого элемента li является произвольной! Браузер рисует и создает за вас сгенерированную рамку маркера.

Сегодня мы рады поговорить о псевдо-элементе ::marker, который дает возможность стилизовать элемент маркера, который браузеры создают за вас.

Важно: псевдо-элемент представляет в документе элемент, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца с помощью псевдо-элемента p::first-line, даже если нет HTML-элемента, обертывающего эту строку текста.

Создание маркера

Блок псевдо-элемента маркера ::marker автоматически создается внутри каждого элемента списка перед фактическим содержимым и псевдо-элементом ::before.

Обычно элементы списка являются элементами HTML li, но другие элементы также могут стать элементами списка с помощью display: list-item.

Стилизация маркера

До ::marker списки не могли быть стилизованы с помощью list-style-type и list-style-image, чтобы изменить символ элемента списка с помощью 1 строки CSS:

Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д.!? Вот где на помощь приходит ::marker. Он позволяет индивидуально и глобально выбирать эти псевдо-элементы из CSS:

Внимание: Если в приведенном выше списке нет розовых маркеров, значит ::marker не поддерживается вашим браузером.
Свойство list-style-type дает очень ограниченные возможности для стилизации. Псевдо-элемент ::marker означает, что можно настроить таргетинг самого маркера и применить стили непосредственно к нему. Это дает гораздо больший контроль.

Тем не менее, вы не можете использовать все свойства CSS для ::marker. Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы попробуете что-то интересное с этим псевдо-элементом, и это не сработает, приведенный ниже список является вашим руководством по тому, что можно и что нельзя сделать с помощью CSS.

Допустимые свойства CSS для ::marker

Изменение содержимого ::marker выполняется с помощью content вместо list-style-type. В следующем примере для первого элемента используется стиль list-style-type, а для второго — ::marker. Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, что означает, что текст анимируется так же, как и маркер. При использовании ::marker мы можем выбирать только блок маркера, а не текст.

Также обратите внимание на то, что отключенное свойство background не действует.

Стили списков

Стили маркеров

Проблемы!

В Chromium white-space работает только с внутренними маркерами. Для маркеров, расположенных снаружи регулятор стиля всегда задает white-space: pre, чтобы сохранить свободное пространство.

Изменение содержимого маркера

Вот несколько способов стилизации маркеров.

Изменение всех маркеров списка

Изменение только одного маркера списка

Замена маркера списка на SVG

Изменение нумерованных списков

А что насчет ol? Маркер в элементе нумерованного списка по умолчанию является числом, а не маркером. В CSS они называются счетчиками, и они довольно мощные. У них даже есть свойства для установки и сброса в начале и в конце числа или переключения их на римские цифры. Можем ли мы это стилизовать? Да, и мы даже можем использовать значение содержимого маркера для создания собственного представления нумерации.

Отладка

Chrome DevTools готов помочь вам проверить, отладить и изменить стили, применяемые к псевдо-элементам ::marker.

Автор: Adam Argyle, Oriol Brufau

Источник: //web.dev

Редакция: Команда webformyself.

Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.

Использование <span>

Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

<li>текст</li>

создаем конструкцию

<li><span>текст</span></li>

При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1).

Пример 1. Использование вложенных тегов

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет текста и маркеров в списке</title>
<style>
li {
color: red; /* Цвет маркеров */
}
li span {
color: green; /* Цвет текста */
}
</style>
</head>
<body>
<ul>
<li><span>Скрипка</span></li>
<li><span>Гитара</span></li>
<li><span>Волынка</span></li>
<li><span>Шарманка</span></li>
<li><span>Челеста</span></li>
</ul>
</body>
</html>

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

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять <span>.

Использование ::before

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content. Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае <li>. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.

Пример 2. Использование псевдоэлемента ::before

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет маркеров в списке</title>
<style>
li {
list-style-type: none; /* Прячем исходные маркеры */
}
li::before {
color: red; /* Цвет маркера */
content: «▪»; /* Сам маркер */
padding-right: 10px; /* Расстояние от маркера до текста */
}
</style>
</head>
<body>
<ul>
<li>Север</li>
<li>Юг</li>
<li>Запад</li>
<li>Восток</li>
</ul>
</body>
</html>

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

Рис. 2. Маркеры, созданные с помощью стилей

• Как создать список без маркеров
• Как заменить маркеры списка на изображения
• Как создать горизонтальные списки
• Как оформить списки
• Пример со всеми видами маркеров

Иногда может понадобиться удалить маркеры/стили упорядоченных (<ol>) и неупорядоченных (<ul>) списков. Удаление маркеров списка не представляет трудности. Для этого можно использовать CSS свойство list-style или list-style-type.

Код будет иметь следующий вид:

ul {
list-style-type: none;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style: none;
      }
      ol {
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Неупорядоченный список</h2>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
    <h2>Упорядоченный список</h2>
    <ol>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ol>
  </body>
</html>

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

Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.

Можете также установить класс к любому элементу списка (<li>), не меняя остальные маркеры.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .nolist {
      list-style: none ;
      }
    </style>
  </head>
  <body>
    <h2>Неупорядоченный список</h2>
    <ul>
      <li>Элемент списка 1</li>
      <li class="nolist">Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
    <h2>Упорядоченный список</strong></h2>
    <ol class="nolist">
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ol>
  </body>
</html>

CSS может быть использован, чтобы превратить маркеры в квадраты или круги, но таким образом мы не имеем полного контроля над их внешним видом или положением. Замена стандартных HTML маркеров на изображения — отличный способ, чтобы сделать ваш сайт более привлекательным.

Есть два способа установления изображений для элементов списка:

1. Используйте list-style-image, чтобы заменить HTML маркеры на графические изображения. В большинстве современных браузеров применение этих изображений несовместимо. А также нет полного контроля над положением маркеров.

HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.

Нет полного контроля над тем, как будут отображаться маркеры перед элементами списка.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

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

• Создайте простой неупорядоченный список
• Удалите маркеры с помощью list-style-type: none none
• Удалите поля и отступы

Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) — поля.

Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в «0» для элемента <ul>, как в данном примере:

ul {
padding: 0;
margin: 0;
}

• Добавьте отступ сами

В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.

• Добавьте фоновое изображение

Используйте CSS свойство background-image, чтобы добавить фоновое изображение для элемента <li>. Таким образом, фоновое изображение будет повторяться для фона каждого элемента списка, что не будет красиво смотреться.

• Задайте no-repeat

Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.

li { 
background-image: url(star.png); 
background-repeat: no-repeat;
}

• Измените положение фонового изображения

Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.

Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.

background-position: 1px;

• Переместите контент

Чтобы отдалить контент от фонового изображения, примените padding-left к элементу <li>. В данном случае используется «20px». Как и в случае вертикального выравнивания, отступ списка будет определен размером изображения.

А сейчас увидим каким будет полный пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      }
      li {
      background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      background-repeat: no-repeat;
      background-position: 1px;
      padding-left: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Зеленый</li>
      <li>Синий</li>
      <li>Желтый</li>
      <li>Красный</li>
    </ul>
  </body>
</html>

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

Создание горизонтальных списков не так уж трудно. Это отличный способ сделать так, чтобы списки действовали как кнопки или навигационное меню. Есть много методов, которые можно использовать для создания горизонтального списка. Главное установить display: inline указанный для элемента <li>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #container ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      text-align: center;
      }
      #container ul li { 
      display: inline; 
      }
      #container ul li a {
      text-decoration: none;
      padding: 5px 20px;
      color: #fff;
      background-color: #1c87c9;
      }
      #container ul li a:hover
      {
      color: #fff;
      background-color: #369;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </body>
</html>

Добавьте стиль к спискам с помощью свойств color и background-color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      ol {
      background: #1c87c9;
      padding: 20px;
      color: cyan;
      }
      ul {
      background: #8ebf42;
      padding: 20px;
      }
      ol li {
      background: #666;
      padding: 5px;
      margin-left: 35px;
      }
      ul li {
      background: #eee;
      margin: 5px;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ol>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>
  </body>
</html>

Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      border: 1px solid #ddd;
      background-color: #eee;
      list-style-type: none;
      padding: 0;
      }
      ul li {
      padding: 8px 10px;
      border-bottom: 1px solid #ddd;
      }
      ul li:last-child {
      border-bottom: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>
  </body>
</html>

Добавьте границу к элементам вашего списка, используя CSS свойство border-left:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      border-left: 5px solid #8ebf42;
      background-color: #eee;
      list-style-type: none;
      padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li>Кофе</li>
        <li>Чай</li>
        <li>Молоко</li>
      </ul>
    </div>
  </body>
</html>

Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .disc {
      list-style: disc;
      }
      .square {
      list-style: square;
      }
      .armenian {
      list-style: armenian;
      }
      .lower-greek {
      list-style: lower-greek;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="disc">Круглый маркер</li>
      <li class="square">Квадратный маркер</li>
      <li class="armenian">Армянский маркер</li>
      <li class="lower-greek">Греческий маркер</li>
    </ul>
  </body>
</html>

В этом примере увидите разные виды упорядоченных (<ol>) и неупорядоченных (<ul>) списков:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul.a {list-style-type: circle;}
      ul.b {list-style-type: square;}
      ol.c {list-style-type: upper-roman;}
      ol.d {list-style-type: lower-alpha;}
      ol.e {list-style-type: armenian;}
      ol.f {list-style-type: decimal;}
      ol.g {list-style-type: cjk-ideographic;}
      ol.h {list-style-type: decimal-leading-zero;}
      ol.i {list-style-type: georgian;}
      ol.j {list-style-type: hebrew;}
      ol.k {list-style-type: hiragana;}
      ol.l {list-style-type: hiragana-iroha;}
      ol.m {list-style-type: katakana;}
      ol.n {list-style-type: katakana-iroha;}
      ol.o {list-style-type: lower-greek;}
      ol.p {list-style-type: lower-latin;}
      ol.q {list-style-type: lower-roman;}
      ol.r {list-style-type: none;}
      ol.s {list-style-type: upper-alpha;}
      ol.t {list-style-type: upper-latin;}
    </style>
  </head>
  <body>
    <h2>Примеры неупорядоченных списков </h2>
    <h3>Circle</h3>
    <ul class="a">
      <li>Нью-Йорк</li>
      <li>Лас-Вегас</li>
      <li>Вашингтон</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>Сан-Франциско</li>
      <li>Лос-Анджелес</li>
      <li>Майами</li>
    </ul>
    <h2>Примеры упорядоченных списков:</h2>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Барселона</li>
      <li>Мадрид</li>
      <li>Лондон</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Дубай</li>
      <li>Абу-Даби</li>
      <li>Катар</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Ереван</li>
      <li>Париж</li>
      <li>Рим</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Сидней</li>
      <li>Гонк Конг</li>
      <li>Москва</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Киев</li>
      <li>Санкт-Петербург</li>
      <li>Тула</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Бангкок</li>
      <li>Гюмри</li>
      <li>Валенсия</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Мадрид</li>
      <li>Барселона</li>
      <li>Прага</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Иерусалим</li>
      <li>Торонто</li>
      <li>Прага</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Каир</li>
      <li>Токио</li>
      <li>Афины</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Тегеран</li>
      <li>Тебриз</li>
      <li>Тель-Авив</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Мюнхен</li>
      <li>Берлин</li>
      <li>Бавария</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Брюссель</li>
      <li>Стамбул</li>
      <li>Сидней</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Севилья</li>
      <li>Гранада</li>
      <li>Венеция</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Будапешт</li>
      <li>Виенна</li>
      <li>Амстердам</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Буэнос-Айрес</li>
      <li>Рио-де-Жанейро</li>
      <li>Сан-Паоло</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Вильнюс</li>
      <li>Таллинн</li>
      <li>Рига</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Монреаль</li>
      <li>Мельбурн</li>
      <li>Эдинбург</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Дублин</li>
      <li>Мексика</li>
      <li>Флоренция</li>
    </ol>
  </body>
</html>

• Изменение и удаление маркеров
• Замена маркеров картинками
• Отступ списка

С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.

Изменение и удаление маркеров

Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .class1 { list-style-type: circle; }
      .class2 { list-style-type: disc; }
      .class3 { list-style-type: square; }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-type: none; }
	  ol { list-style-type: none; }
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

Замена маркеров картинками

Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-image: url('sqpurple.gif'); }
      ol { list-style-image: url('donald.gif'); }
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

Отступ списка

При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { 
	    list-style-type: none;
        padding-left: 0;		
	  }
	  ol { padding-left: 0;	}
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах — по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.

Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:

• outside — маркер располагается слева от содержимого (является значением по умолчанию)
• inside — маркер располагается внутри пункта списка вместе с содержимым

Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  li { border: 1px solid red; }
      .class1 { list-style-position: outside; }
      .class2 { list-style-position: inside; }
      .class3 { 
	    list-style-position: inside;
		padding-left: 0;
	  }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

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