Убрать маркеры li: Как убрать маркеры в маркированном списке? – html — Как убрать точки от

Leave a Comment / Разное / By /

html ul li убрать маркер

На чтение 4 мин. Опубликовано

В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML . В том числе и с помощь list style none .

Пример HTML

Добавление стиля «list-style: none» в тег неупорядоченного (

    ) или упорядоченного списка (
    ) уберет любые маркеры или номера:

    Пример HTML с CSS

    Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML , которые можно использовать для удаления маркеров.

    Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (

    ). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:

Но лучше создать класс list style none CSS , который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS :

В приведенном выше коде CSS создается новый класс «nobull» . Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:

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

Вывод примера

Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none .

Данная публикация представляет собой перевод статьи « How to create a bullet list with no bullets in HTML » , подготовленной дружной командой проекта Интернет-технологии.ру

Тип маркера

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

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

Коприрование материалов сайта возможно только с согласия администрации

За управление маркерами есть специальное свойство CSS list-style-type .

Синтаксис свойства CSS list-style-type

  • disc — маркер в виде закрашенного кружка
  • circle — маркер в виде прозрачного кружка
  • square — маркер в виде закрашенного квадрата
  • none — отсутствие маркера

css li убрать маркер | Все о Windows 10

На чтение 4 мин. Просмотров 2 Опубликовано

За управление маркерами есть специальное свойство CSS list-style-type .

Синтаксис свойства CSS list-style-type

  • disc — маркер в виде закрашенного кружка
  • circle — маркер в виде прозрачного кружка
  • square — маркер в виде закрашенного квадрата
  • none — отсутствие маркера

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Скрыть отображение маркеров в списке.

Решение

Для этой цели применяется стилевое свойство 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. Для этого есть свойство 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 .

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

Коприрование материалов сайта возможно только с согласия администрации

Как убрать маркеры списка css?

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

<br
<br<ul class=»my-list»><br<li> Весна</li><br<li> Лето</li><br<li> Осень</li><br<li> Зима</li><br</ul><br

<ulclass=«my-list»>

<li> Весна</li>

<li> Лето</li>

<li> Осень</li>

<li> Зима</li>

По умолчанию он будет отображаться с вот такими маркерами в виде точек:

Если мы хотим убрать маркеры списка, то нам нужно для его элементов дописать CSS-свойство list-style:none; или list-style-type: none;

<br
<br.my-list { list-style:none;<br}<br

.my—list{

list—style:none;

Если наш список не имеет своего класса, но находится в каком то блоке, как здесь:

<br
<br<div class=»block»><br<ul><br<li> …</li><br<li> …</li><br</ul><br</div><br

<divclass=«block»>

<li> …</li>

<li> …</li>

То CSS код будет выглядеть так:

<br
<br. block ul li {<brlist-style:none;<br}<br

.blockulli{

list—style:none;

Аналогично мы можем убрать цифры в нумерованном списке, только вместо ul нужно указывать ol.
Это свойство позволит нам убрать маркер, но отступ слева останется.

Убрать маркеры списка css

Чтобы убрать этот отступ слева применим для тегов <li< CSS свойство margin-left:0px;

<br
<br.my-list { margin-left:0px;<br}<br

.my—list{

margin—left:0px;

Если дописанные CSS свойства у вас не срабатывают, то можно дописать им правило !important чтобы поднять их приоритет.

<br
<brmargin-left:0px!important;<br

margin—left:0px!important;

Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»
Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера.

как убрать точку в нумерации списка OL

На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

Рис. 1. Вид маркированного списка

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

Пример 1. Изменение вида маркера

В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к

добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

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

Списки
  • Сепульки
  • Сепулькарии
  • Сепуление

Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.

Рис. 2. Произвольные маркеры в списке

Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

Рис. 3. Выбор символа в LibreOffice

Список с рисованными маркерами

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

Пример 3. Использование изображения в качестве маркера

Списки
  • Сепульки
  • Сепулькарии
  • Сепуление

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

Рис. 4. Рисунок в качестве маркера

Применение list-style-image обладает некоторыми недостатками:

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

Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка

мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

Пример 4. Использование background

Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; }

Положение текста и маркера

Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).



insideoutside

Рис. 5. Размещение маркеров относительно текста

Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

Пример 5. Изменение положения маркеров

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

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

Допустим у нас имеется нумерованный список OL (.our-list) такого вида:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в css-коде следующие правила:

.our-list { counter-reset : item; //item — переменная, которая будет содержать значение счетчика list-style-type : none ; // убираем нумерование списка width : 150px ; //необходимо задать ширину, чтобы отталкиваться от этого значения } .our-list li: before { content : counter(item) » «; //заново вставляем счетчик пунктов уже другим способом и без точки counter-increment : item; //увеличиваем значение счетчика color : #ff0000 ; //можем задать другой цвет цифрам }

Our-list { counter-reset: item; //item — переменная, которая будет содержать значение счетчика list-style-type: none; // убираем нумерование списка width: 150px; //необходимо задать ширину, чтобы отталкиваться от этого значения } .our-list li:before { content: counter(item) «»; //заново вставляем счетчик пунктов уже другим способом и без точки counter-increment: item; //увеличиваем значение счетчика color: #ff0000; //можем задать другой цвет цифрам }

В результате мы можем наблюдать следующее:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

Казалось бы, проблема решена. Но пока это хорошо работает только для однострочных пунктов. Если мы добавим строк к каждому пункту списка, то увидим, что пока еще все не так хорошо… Вот что получится:

  1. Пункт 1
    Строка 2
    Строка 3
  2. Пункт 2
    Строка 2
    Строка 3
  3. Пункт 3
    Строка 2
    Строка 3

Я думаю, это не совсем то, что требуется. Получается, что в данном случае номер принадлежит первой строке пункта списка. Чтобы решить этот вопрос окончательно, стоит добавить еще 3 строки в css-код

Our-list { counter-reset: item; list-style-type: none; width: 150px; } .our-list li:before { content: counter(item) «»; counter-increment: item; color: #ff0000; float:right; //делаем обтекание справа position:relative; //и перемещаем цифры влево, чтобы они встали перед списком left:-165px; }

Доброго времени суток!

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

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

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

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

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

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

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

Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

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

На изображении выше (Рис 1.1.) можно за

Ul css убрать маркеры. Как в css у элементов ul li убрать маркеры

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

С элементом

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

    На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

    Рис. 1. Вид маркированного списка

    Вид маркера

    Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

    • disc — маркеры в виде закрашенного кружка;
    • circle — маркеры в виде незакрашенного кружка;
    • square — квадратные маркеры.

    Пример 1. Изменение вида маркера

    Списки
    • Сепульки
    • Сепулькарии
    • Сепуление

    В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к

  • не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
  • добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

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

    Списки
    • Сепульки
    • Сепулькарии
    • Сепуление

    Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.

    Рис. 2. Произвольные маркеры в списке

    Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

    Рис. 3. Выбор символа в LibreOffice

    Список с рисованными маркерами

    Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В к

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *