Рассмотрим как убрать маркеры списка в CSS, ведь такая необходимость возникает очень часто при работе как с маркированными так и с нумерованными списками.
Предположим у нас есть обычный список:
|
<ul class=«my-list»>
<li> Весна</li>
<li> Лето</li>
<li> Осень</li>
<li> Зима</li>
|
По умолчанию он будет отображаться с вот такими маркерами в виде точек:
Если мы хотим убрать маркеры списка, то нам нужно для его элементов дописать CSS-свойство list-style:none; или list-style-type: none;
|
.my—list {
list—style:none;
|
Если наш список не имеет своего класса, но находится в каком то блоке, как здесь:
|
<div class=«block»>
<li> …</li>
<li> …</li>
|
То CSS код будет выглядеть так:
|
. block ul li {
list—style:none;
|
Аналогично мы можем убрать цифры в нумерованном списке, только вместо ul нужно указывать ol.
Это свойство позволит нам убрать маркер, но отступ слева останется.
Чтобы убрать этот отступ слева применим для тегов <li< CSS свойство margin-left:0px;
|
.my—list {
margin—left:0px;
|
Если дописанные CSS свойства у вас не срабатывают, то можно дописать им правило !important чтобы поднять их приоритет.
|
margin—left:0px!important;
|
Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»
Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера.
