Как удалить, заменить или оформить маркеры списка с помощью CSS
Иногда может понадобиться удалить маркеры/стили упорядоченных (<ol>) и неупорядоченных (<ul>) списков. Удаление маркеров списка не представляет трудности. Для этого можно использовать CSS свойство list-style или list-style-type.
Код будет иметь следующий вид:
Пример
Если хотите иметь только один список или один элемент списка без маркеров или чисел, можно применить класс, который может быть использован каждый раз для удаления маркеров.
Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.
Можете также установить класс к любому элементу списка (<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> ) списков:
Оформление списков в CSS
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах — по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside — маркер располагается слева от содержимого (является значением по умолчанию)
- inside — маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.
Как убрать точки от <li>
Как можно убрать это (в неупорядоченном списке <li> ):
Для этой цели применяется стилевое свойство list-style-type со значением none :
Можно сделать изящней то же самое:
Это будет строчно-блочное отображение, маркеры уйдут. Можно просто inline применить.
А можно и блоком оставить список и убрать маркеры:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
Css убрать точки в списке
Как в css у элементов ul li убрать маркеры, которые стоят по умолчанию
Приветствую вас на своем блоге. Сегодня я хотел бы затронуть тему, как через css у маркированных пунктов списка (ul li) убрать маркеры, потому что они зачастую не нужны и только мешают оформлять сайт.
Убираем маркеры по умолчанию
Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style. Значением по умолчанию выступает circle, то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:
Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам. Это очень важно. Вышеприведенная запись убирает маркеры у всех списков на вашем сайте, но может быть так, что у вас будет несколько оформлений списков.
В таком случае справиться с их стилизацией помогут классы. Нужным спискам просто вешаете стилевой класс и оформляете их.
Как поставить свою картинку маркера
Да-да, css позволяет создать свой, гораздо более привлекательный маркер. Его можно задать также с помощью свойства list-style-image, либо упрощенно с помощью list-style. В значении в скобках прописывается путь к файлу, а перед ним нужно поставить ключевое слово url.
Более подробно о свойствах списков я расписал в этой статье, рекомендую почитать, чтобы разъяснить для себя все детали.
Как убрать точки li маркеры из списка
Как убрать точки li в меню
Доступ к namebased сайту без DNS-записи в Windows
Как включить интернациональные домены (punycode) в ISPConfig3
Html в конце ссылки статей в WordPress
Html в конце ссылок страниц WordPress
Удалить category WordPress
Как добавить редирект (301) в ISPConfig
Как настроить DNS шаблоны в ISPConfig 3
Форма контактов для WordPress
Как убрать ссылку из плагина iSape в WordPress
Простой и красивый способ украсить UnderConstruction
iSape vs VKontakte API и iMoney + VK comments
Не показывать виджет iMoney если он пуст
Простой скрипт обратного отсчета (javascript)
Заменить слова в базе MySQL средствами phpMyAdmin
Русификация плагина «NextGEN Gallery» (файл)
WP-PageNavi добавление пагинации
Случайный вывод кода (видео, текст, картинки)
Добавление меню в старый шаблон WordPress
Обвести текст при помощи HTML и CSS
Убрать category из ссылки WP (продолжение)
Добавить html в категорию и страницу
Обновляем WordPress до 3.5
Во время загрузки произошла ошибка. WordPress
Добавить валюту (руб.) в woocommerce
Системные переменные Windows
Joomla/Mambo To WordPress Migrator (5 советов)
Красивые WordPress caption
Вывод материалов из рубрики списком WordPress
Jazzy Forms плагин, который радует!
При обновлении произошла ошибка: Не удалось определить директорию содержимого
Cherry FrameWork logo + description
Удаляем строки Saphali Lite, Woocommerce, All in one seo pack
Простой плагин email рассылки (Newsletter) для WordPress
Ошибка Deprecated: Function ereg() is deprecated in /samefile.php on line 142
WordPress не работают постоянные ссылки (404 Not Found)
Несколько простых команд для Cent OS
Дополнительный домен в панели ISPManager
Несколько мыслей про Skype
Как сделать в windows 7 в папке «столбцы по размеру содержимого» по умолчанию?
Как прочистить дюзы принтеру Epson Stylus Photo на Mac OS X
Шаблон Mantra изменения вида пагинации
Шаблон Mantra изменение текста Read more
Изменить количество памяти в Mamp Pro php.ini
ISPManager установить SSL сертификат
Как выводить первую картинку поста wordpress
Как изменить длину анонса (excerpt) плагин
Как удалить ссылки на картинки в новостях WordPress
Управления ссылками WordPress плагин WPNoExternalLinks
Удаляем второй meta name=description от All in One Seo Pack
Как удалить конкретную маркерную точку внутри ul в CSS?
У меня есть простой список, и все, что я хочу сделать, это удалить конкретную маркерную точку (только значок, а не содержимое внутри li) в ul.
Я использовал первого ребенка, чтобы забрать первый, но я бы хотел удалить шестой маркер!