Как в css у элементов ul li убрать маркеры
Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка 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 - значение принимается от родительского элемента. Для обоих списков
Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:
Стиль:
1 |
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к Пример 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 , оно устанавливает фоновое изображение. Для каждого элемента списка Пример 4. Использование background Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; } Положение текста и маркераСуществует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
Рис. 5. Размещение маркеров относительно текста Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside - маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside - маркеры являются частью текстового блока и отображаются в элементе списка (пример 5). Пример 5. Изменение положения маркеров
Результат данного примера показан на рис. 6. Допустим у нас имеется нумерованный список OL (.our-list) такого вида:
А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в 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; //можем задать другой цвет цифрам } В результате мы можем наблюдать следующее:
Казалось бы, проблема решена. Но пока это хорошо работает только для однострочных пунктов. Если мы добавим строк к каждому пункту списка, то увидим, что пока еще все не так хорошо… Вот что получится:
Я думаю, это не совсем то, что требуется. Получается, что в данном случае номер принадлежит первой строке пункта списка. Чтобы решить этот вопрос окончательно, стоит добавить еще 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; } Приветствую вас на своем блоге. Сегодня я хотел бы затронуть тему, как через css у маркированных пунктов списка (ul li) убрать маркеры, потому что они зачастую не нужны и только мешают оформлять сайт. Убираем маркеры по умолчаниюИногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style . Значением по умолчанию выступает circle , то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так: Ul{ List-style-type: none; } Ul{ List-style: none; } Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам. Это очень важно. Вышеприведенная запись убирает маркеры у всех списков на вашем сайте, но может быть так, что у вас будет несколько оформлений списков. В таком случае справиться с их стилизацией помогут классы. Нужным спискам просто вешаете стилевой класс и оформляете их. Как поставить свою картинку маркераCss позволяет создать свой, гораздо более привлекательный маркер. Его можно задать также с помощью свойства list-style-image , либо упрощенно с помощью list-style . В значении в скобках прописывается путь к файлу, а перед ним нужно поставить ключевое слово url . Ul{ List-style: url(marker.png); } |