Списки css. как убрать маркеры списка

Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

html
>

head
>

title
>
Вложенный маркированный список HTML/
title
>

/
head
>

body
>

ul
>

li
>
Citroen
ul
>

li
>
Berlingo/
li
>

li
>
C1/
li
>

li
>
C2/
li
>

li
>
C3 Picasso/
li
>

li
>
C4 Grand Picasso/
li
>

/
ul
>

/
li
>

li
>
KIA/
li
>

li
>
Toyota/
li
>

li
>
Audi/
li
>

li
>
Lexus/
li
>

/
ul
>

/
body
>

/
html
>

Обратите внимание, как выглядит многоуровневый список в браузере:

Мы делали многоуровневый список с помощью маркированного (тег

Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1
Как сделать список HTML в строку

4.2
Как сделать список HTML без значка

4.3
Как сделать список в HTML по центру

Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:

4.4
Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image
. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5
Маркированный список HTML свой маркер

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome
). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6
Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count
(свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

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

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

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

CSS Свойство:

list-style-type:

Результат:

Кликните на значение свойства list-style-type
Наблюдайте за сменой маркеров
Используйте для своих списков наиболее подходящие маркеры

CSS Код:

ol#myList { list-style-type: decimal; }

Кликните на любое значение свойства, чтобы увидеть результат

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений 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>

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

Нумерованный список

От маркированного отличается тем, что порядок элементов в нём важен, а потому вместо маркера здесь используются последовательно идущие цифры или буквы. О порядке в списке заботиться не нужно: эту задачу берёт на себя браузер. Если изменить список (удалить или добавить элемент, нарушив порядок), обозреватель пересчитает его и отобразит правильно.

Для создания нумерованных списков используются теги <ol> и <li>. Контейнер <ol> определяет начало и конец списка, тег <li> задаёт начало и конец его элемента — всё, как в маркированном списке, только <ul> заменено на <ol>.

<!DOCTYPE html>
<html>
<head>
    <title>Нумерованный список</title>
</head>
<body>
   <ol>
      <li>Камень</li>
      <li>Ножницы</li>
      <li>Бумага</li>
   </ol>
</body>
</html>

Так как с нумерованными списками не всегда всё так просто, для тега

создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):

1. type. Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).

2. start. Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение — номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.

3. reversed. Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.

Для того, чтобы задать произвольный номер элементу в середине списка, нужно использовать в теге <li> атрибут <value>:

<li value=”45”>Сорок пятый элемент после тридцать восьмого</li>

Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов — отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.

Как создать список без маркеров

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

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

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

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

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

Маркер в виде изображения

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

Первый пункт
Второй пункт

Для использлвания изображения существует
свойство list-style-image
. Значением
свойства является путь к файлу изображения.

Для примера Вы можете использовать это изображение: Нажмите на него
правой кнопкой мыши и выберите «Сохранить изображение как».

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл
marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу
нужно прописывать по-другому.

Стиль:

16171819

#nl3
{
list-style-image: url(«marker.jpg»);
}

HTML код:

34353637

Первый пункт
Второй пункт

Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

Обратите внимание, как выглядит многоуровневый список в браузере:

Рис. 3.1. Пример многоуровневого списка в HTML

Мы делали многоуровневый список с помощью маркированного (тег <ul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере

Стиль обтекания маркера списком.

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

Возможных значений свойства list-style-position
всего два:

outside
— Маркер находится в стороне от списка.(по умолчанию)
inside
— Маркер обтекается текстом.

Пример для наглядности:

Обтекание маркера текстом

А здесь нет:

Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.

Маркированные списки в HTML

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:

А вот так выглядит в браузере:

1.1
Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

1.2
Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type
и задали его нашему маркированному списку:

html
>

head
>

title
>
Пример маркированного списка с маркером в виде пустого круга/
title
>

/
head
>

body
>

p
>
Звезды:/
p
>

ul
type
=
«circle»
>

li
>
Сириус/
li
>

li
>
Арктур/
li
>

li
>
Поллукс/
li
>

li
>
Бетельгейзе/
li
>

li
>
Солнце/
li
>

/
ul
>

/
body
>

/
html
>

Сразу смотрим как этот код будет выглядеть в браузере:

1.3
Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

Важное замечание:
сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML

HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

Ошибка будет следующая:

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

Оформление списков с помощью 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 {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;} Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

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

Синтаксис

Ul {list-style-image: url(«images/romb.png»);}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);} Рис. 2. Оформление маркированного списка с помощью изображения Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать
маркер списка 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
— значение принимается от родительского элемента.
Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Стиль:

123456

Страница

Списки в 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 — значение принимается от родительского элемента. Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Попробуйте установить другие типы маркера.

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

В этом пункте списка маркер находится за пределами элемента и занимает своё место на странице.
В этом пункте списка маркер входит в элемент списка и является частью текста

Позицию маркера устанавливает свойство list-style-position . Оно принимает значения:

list-style-position: outside — за пределами элемента (по умолчанию)

list-style-position: inside — внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position :

Маркер в виде изображения

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

Первый пункт
Второй пункт

Для использлвания изображения существует свойство list-style-image . Значением свойства является путь к файлу изображения.

Для примера Вы можете использовать это изображение: Нажмите на него правой кнопкой мыши и выберите «Сохранить изображение как».

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.

Краткая запись

Существует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style . В нём перечисляются через пробел сначала тип маркера, затем положение маркера, затем картинка. При этом, все свойства указывать не обязательно. Указываются только те свойства, которые нужны.

Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style .

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

Расширенные возможности

По умолчанию для выделения элементов маркированного списка используется закрашенный круг. HTML позволяет переопределить эту настройку с помощью атрибута type.

Значения, которые может принимать атрибут type:

disc — применяется по умолчанию, и выводит маркер в виде закрашенного круга.
circle — оформление в виде пустого круга (окружности).
square — маркер выводится в виде закрашенного квадрата.

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Изменение типа маркировки</title>   </head>   <body>   <h1>Список покупок</h1>   <ul type="circle">   <li>500гр томатов</li>   <li>Упаковка риса</li>   <li>Чесночный соус</li>   <li>Винный уксус</li>   </ul>   </body>  </html>

Как удалить, заменить или оформить маркеры списка с помощью CSS

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

Пример¶

Можете также установить класс к любому элементу списка (<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> ) списков:

Как убрать точки li маркеры из списка

ZorNet – портал для вебмастера » HTML и CSS » Как убрать точки li маркеры из списка

Здесь разберем тему как можно убрать точки, которые появляются при создание списков или навигаций на сайте, думаю многие встречали. Так как выставляешь меню или категорий, то в самом начале появляется точка и их кода или стиля ее не возможно убрать. Здесь только один выход, это запретить показывать. Она может создаться при случай, когда li присутствует. Но вообщем ближе к теме, идеи в CSS и в самый низ припишем стиль, что как раз будет отвечать за то, чтоб не выводил. li { list-style-type: none; /* Убираем точки маркеры */

}

Так как сам недавно прописывал шрифтовые иконки и на одной, которая была под ссылкой на категорию появилась она, что пришлось таким способом воспользоваться.

Как сделать многоуровневый (вложенный) список в HTML

Полезные материалы по спискам HTML

4.1 Как сделать список HTML в строку

4.2 Как сделать список HTML без значка

4.3 Как сделать список в HTML по центру

4.4 Как сделать список в HTML с картинками

4.5 Маркированный список HTML свой маркер

4.6 Как сделать список в HTML в несколько столбцов

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

Нумерованный список

Как создать список без маркеров

Маркер в виде изображения

Как сделать многоуровневый (вложенный) список в HTML

Стиль обтекания маркера списком.

А здесь нет:

Маркированные списки в HTML

1.1 Стандартные маркеры для маркированного списка

1.2 Маркер списка в виде пустого круга

1.3 Маркер списка в виде квадрата

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

2. Изображения для элементов списка list-style-image

3. Местоположение маркера списка list-style-position

Списки в CSS

Позиция маркера

Маркер в виде изображения

Краткая запись

Расширенные возможности

Как удалить, заменить или оформить маркеры списка с помощью CSS

Пример¶

Пример¶

Как заменить маркеры списка на изображения¶

Пример¶

Пример¶

Как создать горизонтальные списки¶

Пример¶

Как оформить списки¶

Пример¶

Пример¶

Пример¶

Пример¶

Как убрать точки li маркеры из списка

4.1
Как сделать список HTML в строку

4.2
Как сделать список HTML без значка

4.3
Как сделать список в HTML по центру

4.4
Как сделать список в HTML с картинками

4.5
Маркированный список HTML свой маркер

4.6
Как сделать список в HTML в несколько столбцов

1.1
Стандартные маркеры для маркированного списка

1.2
Маркер списка в виде пустого круга

1.3
Маркер списка в виде квадрата