Css убрать точки в списке

Чтобы скрыть отображение маркеров в списке применяется стилевое свойство list-style-type со значением none. Его следует добавить к селектору ul или li, как показано в примере 1. Пример 1. Список без маркеров Убираем маркеры в списке Север Юг Запад Восток Результат данного примера показан на рис. 1. Рис. 1. Список без маркеров Маркеры хотя и не отображаются в списке, но текст

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.09.2018

Редакторы: Влад Мержевич

Тип маркера

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

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

Стиль:

+

7
8
9
10
11
12
13
14

#nl1 { list-style-type: circle; }#nl2 { list-style-type: upper-latin; }

HTML код:

18
19
20
21
22
23
24
25

<ul id=”nl1″> <li>Первый пункт</li> <li>Второй пункт</li></ul><ol id=”nl2″> <li>Первый пункт</li> <li>Второй пункт</li></ol>

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

Пример HTML

Добавление стиля «list-style: none» в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:

<ul style=”list-style: none;”> <li>Элемент списка без маркера</li> <li>Второй элемент</li></ul>

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

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

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

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

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> Попробовать »

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Как убрать маркеры списка в CSS

Значение none позволяет убрать маркеры списка. Пример:

38
39
40
41

<ul style=”list-style-type: none”> <li>Строка текста</li> <li>Другая строка текста</li></ul>

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

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

css-ubrat-tochki-v-spiske_0.jpg

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

}

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

2017-09-24 Просмотров: 1010 Комментарий: (11) Поделиться в социальных сетях

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

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

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

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

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

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

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

Стиль:

10

list-style-position: inside;

HTML код:

22
23
24

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

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

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

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

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

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

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

Стиль:

16
17
18
19

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

HTML код:

34
35
36
37

<ul id=”nl3″> <li>Первый пункт</li> <li>Второй пункт</li></ul>

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li></ul> ul { list-style-type: square;}

:

Источник: http://code.mu/ru/markup/book/prime/decoration/markers-for-ul-lists/

Как удалить маркеры или номера в списке?

Удаление символа маркера

  1. В диалоговом окне «Маркеры и нумерация» выберите в меню «Тип списка» значение «Маркированный».
  2. Выделите символ маркера, который надо удалить, а затем нажмите «Удалить» (первый встроенный символ маркера не может быть удален).

Источник: http://ia-reading.ru/kak-ubrat-markery-v-spiske-css/

Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...