Как удалить, заменить или оформить маркеры списка с помощью CSS
Иногда может понадобиться удалить маркеры/стили упорядоченных (<ol>) и неупорядоченных (<ul>) списков. Удаление маркеров списка не представляет трудности. Для этого можно использовать CSS свойство list-style или list-style-type.
Код будет иметь следующий вид:
Пример
Если хотите иметь только один список или один элемент списка без маркеров или чисел, можно применить класс, который может быть использован каждый раз для удаления маркеров.
Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.
Можете также установить класс к любому элементу списка (<li>), не меняя остальные маркеры.
Пример
Как заменить маркеры списка на изображения
CSS может быть использован, чтобы превратить маркеры в квадраты или круги, но таким образом мы не имеем полного контроля над их внешним видом или положением. Замена стандартных HTML маркеров на изображения — отличный способ, чтобы сделать ваш сайт более привлекательным.
Есть два способа установления изображений для элементов списка:
- Используйте list-style-image, чтобы заменить HTML маркеры на графические изображения. В большинстве современных браузеров применение этих изображений несовместимо. А также нет полного контроля над положением маркеров.
HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.
Пример
- Использование фоновых изображений для маркеров будет лучшим вариантом. Давайте пошагово увидим, как применить этот метод:
- Создайте простой неупорядоченный список
- Удалите маркеры с помощью list-style-type: none none
- Удалите поля и отступы
Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) — поля.
Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в «0» для элемента <ul>, как в данном примере:
- Добавьте отступ сами
В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.
- Добавьте фоновое изображение
Используйте CSS свойство background-image, чтобы добавить фоновое изображение для элемента <li>. Таким образом, фоновое изображение будет повторяться для фона каждого элемента списка, что не будет красиво смотреться.
- Задайте no-repeat
Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.
- Измените положение фонового изображения
Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.
Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.
- Переместите контент
Чтобы отдалить контент от фонового изображения, примените padding-left к элементу <li>. В данном случае используется «20px». Как и в случае вертикального выравнивания, отступ списка будет определен размером изображения.
А сейчас увидим каким будет полный пример:
Пример
Как создать горизонтальные списки
Создание горизонтальных списков не так уж трудно. Это отличный способ сделать так, чтобы списки действовали как кнопки или навигационное меню. Есть много методов, которые можно использовать для создания горизонтального списка. Главное установить display: inline указанный для элемента <li>.
Пример
Как оформить списки
Добавьте стиль к спискам с помощью свойств color и background-color:
Пример
Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:
Пример
Добавьте границу к элементам вашего списка, используя CSS свойство border-left:
Пример
Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.
Пример
Пример со всеми видами маркеров
В этом примере увидите разные виды упорядоченных ( <ol> ) и неупорядоченных ( <ul> ) списков:
Как в HTML создать маркированный список без маркеров (убрать точки у li)
В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML . В том числе и с помощь list style none .
Пример HTML
Добавление стиля «list-style: none» в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:
Пример HTML с CSS
Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML , которые можно использовать для удаления маркеров.
Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:
Но лучше создать класс list style none CSS , который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS :
В приведенном выше коде CSS создается новый класс «nobull» . Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:
Подсказка : Этот класс можно применить для любого элемента списка (<li>), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.
Вывод примера
Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none .
КК Константин Кондрусин автор статьи « How to create a bullet list with no bullets in HTML »
Оформление списков в CSS
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах — по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside — маркер располагается слева от содержимого (является значением по умолчанию)
- inside — маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.
CSS: как убрать точку в нумерации списка OL. Как в css у элементов ul li убрать маркеры
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
| list-style-type | |
|---|---|
| Значения: | |
| disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
| armenian | Традиционная армянская нумерация. |
| circle | В качестве маркера выступает незакрашенный кружок. |
| cjk-ideographic | Идеографическая нумерация. |
| decimal | 1, 2, 3, 4, 5, … |
| decimal-leading-zero | 01, 02, 03, 04, 05, … |
| georgian | Традиционная грузинская нумерация. |
| hebrew | Традиционная еврейская нумерация. |
| hiragana | Японская нумерация: a, i, u, e, o, … |
| hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
| katakana | Японская нумерация: A, I, U, E, O, … |
| katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
| lower-alpha | a, b, c, d, e, … |
| lower-greek | Строчные символы греческого алфавита. |
| lower-latin | a, b, c, d, e, … |
| lower-roman | i, ii, iii, iv, v, … |
| none | Маркер отсутствует. |
| square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
| upper-alpha | A, B, C, D, E, … |
| upper-latin | A, B, C, D, E, … |
| upper-roman | I, II, III, IV, V, … |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Ul 
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Ul 
Рис. 2. Оформление маркированного списка с помощью изображения 
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера — обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
-
связаны следующие особенности:
- в том месте, где встречается
-
, браузер автоматически добавляет перенос строки;
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
Рис. 1. Вид маркированного списка
Вид маркера
Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения: