Как убрать буллиты в css

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

Здравствуйте, дорогие друзья!

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

Предположим у нас есть обычный список:

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

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

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

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

Это свойство позволит нам убрать маркер, но отступ слева останется.

Чтобы убрать этот отступ слева применим для тегов

Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»

Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера. Подробнее о том как это сделать написано в этой статье: «Как сделать красивый маркированный список HTML?»

Надеюсь что эта статья поможет вам быстрее решить проблему с маркерами и у вас ещё останется время чтобы посмотреть вот это интересное видео про самые необычные здания:

Источник

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

Содержание¶

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

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

Пример¶

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

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

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

Пример¶

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

Есть два способа установления изображений для элементов списка:

HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.

Пример¶

Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в «0» для элемента

, как в данном примере:

В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.

Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.

Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.

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

А сейчас увидим каким будет полный пример:

Пример¶

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

Пример¶

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

Добавьте стиль к спискам с помощью свойств color и background-color:

Пример¶

Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:

Пример¶

Добавьте границу к элементам вашего списка, используя CSS свойство border-left:

Пример¶

Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.

Пример¶

Пример со всеми видами маркеров¶

В этом примере увидите разные виды упорядоченных (

) и неупорядоченных (
) списков:

Источник