Название

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

Имеем маркированный список:

<ul>

<li>Элемент 1</li>

<li>Элемент 2</li>

<li>Элемент 3</li>

</ul>

 

Как быть, если нужно вместо маркеров, которые используются по умолчанию, использовать какое-либо изображение.

Например, вот такую галочку.

Давайте рассмотрим один из способов, как можно решить эту проблему.

 

ul

{

list-style: none;

}




li

{

background: url(https://webgyry.info/images/checklist.png) no-repeat scroll left center rgba(0, 0, 0, 0);

line-height:40px;

padding-left:47px;

}

Свойство list-style: none убирает маркеры по умолчанию.

background: url(https://webgyry.info/images/checklist.png) no-repeat scroll left center rgba(0, 0, 0, 0) - устанавливаем в качестве фона необходимое изображение.

и смещаемся относительно этого изображения, чтобы все смотрелось опрятно.

line-height:40px;

padding-left:47px;

Вот и все. Надеюсь, что способ поможет вам решить ваши задачи верстки списков.

Назад Далее