# List Styles
A list consists of <li> elements inside a containing element ( <ul> or <ol> ). Both the list items and the container can have margins and paddings which influence the exact position of the list item content in the document. The default values for the margin and padding may be different for each browser. In order to get the same layout cross-browser, these need to be set specifically.
Each list item gets a ‘marker box’, which contains the bullet marker. This box can either be placed inside or outside of the list item box.
places the bullet within the <li> element, pushing the content to the right as needed.
places the bullet left of the <li> element. If there is not enough space in the padding of the containing element, the marker box will extend to the left even if it would fall off the page.
Showing the result of inside and outside positioning: jsfiddle
# Type of Bullet or Numbering
Specific for <li> tags within an unordered list ( <ul> ):
Specific for <li> tags within an ordered list ( <ol> ):
# Removing Bullets / Numbers
Sometimes, a list should just not display any bullet points or numbers. In that case, remember to specify margin and padding.
# Syntax
# Parameters
| Value | Description |
|---|---|
| list-style-type | the type of list-item marker. |
| list-style-position | specifies where to place the marker |
| list-style-image | specifies the type of list-item marker |
| initial | sets this property to its default value |
| inherit | inherits this property from its parent element |
# Remarks
Although the list-style-type is actually a property that applies only to list items (normally <li> ), it is often specified for the list tag ( <ol> or <ul> ). In this case, the list items inherit the property.
Как убрать маркеры в списке?
Чтобы скрыть отображение маркеров в списке применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору ul или li , как показано в примере 1.
Пример 1. Список без маркеров
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора ul в данном примере добавлено свойство padding-left с нулевым значением.
Как убрать маркеры в маркированном списке?
Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.
Пример 1. Список без маркеров
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.
Списки в CSS
У каждого элемента списка есть маркер. Это значёк перед текстом. В CSS есть возможность установить внешний вид маркера. В том числе, можно вообще убрать маркер списка. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.
Для маркированного списка:
list-style-type: disc — в виде диска (по умолчанию)
list-style-type: circle — в виде круга
list-style-type: square — в виде квадрата
Для нумерованного списка
list-style-type: decimal — арабские цифры (по умолчанию)
list-style-type: decimal-leading-zero — арабские цифры c 0 впереди для чисел 1-9
list-style-type: upper-roman — заглавные римские цифры
list-style-type: lower-roman — строчные римские цифры
list-style-type: upper-latin — заглавные латинские буквы
list-style-type: upper-alpha — то же, что и upper-latin
list-style-type: lower-latin — строчные латинские буквы
list-style-type: lower-alpha — то же, что и lower-latin
list-style-type: lower-greek — строчные греческие буквы
list-style-type: armenian — армянские числа
list-style-type: georgean — грузинские числа
list-style-type: none — позволяет убрать маркеры списка. Для обоих списков
list-style-type: inherit — значение принимается от родительского элемента. Для обоих списков
Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:
Попробуйте установить другие типы маркера.
Как убрать маркеры списка в CSS
Значение none позволяет убрать маркеры списка. Пример:
Позиция маркера
Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:
- В этом пункте списка маркер находится за пределами элемента и занимает своё место на странице.
- В этом пункте списка маркер входит в элемент списка и является частью текста
Позицию маркера устанавливает свойство list-style-position . Оно принимает значения:
list-style-position: outside — за пределами элемента (по умолчанию)
list-style-position: inside — внутри элемента
Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position :
Маркер в виде изображения
В качестве маркера можно использованть изображение. При этом, список может выглядеть так:
- Первый пункт
- Второй пункт
Для использлвания изображения существует свойство list-style-image . Значением свойства является путь к файлу изображения.
Для примера Вы можете использовать это изображение: 
Нажмите на него правой кнопкой мыши и выберите «Сохранить изображение как».
Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.
Краткая запись
Существует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style . В нём свойства перечисляются через пробел в следующем порядке:
- тип маркера
- положение маркера
- картинка
Все свойства указывать не обязательно. Указываются только те свойства, которые нужны.
Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style .
Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка.