Как сделать маркированный список в ряд, но с своей картинкой вместо маркера

Question

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

<ul class="first_level">
            <li>Чай</li>
            <li>Кофе</li>
            <li>Пакеты</li>
        </ul>

CSS

ul.first_level li {
    display: inline; /* Отображать как строчный элемент */
    margin-right: 105px; /* Отступ слева */
    list-style-image: url("img/list/ul_coffe.png");
}

С таким кодом, список отображается в ряд, но исчезают картинки. Как это исправить?

Answer 1

Например так

ul.first_level li {
    background-image: url(../images/error.png);
    background-repeat: no-repeat;
    line-height: 20px;
}

или вот так

Answer 2

Предыдущий ответ немного не подошёл. Т.к. изображение будет за текстом.

Ответ получился следующий:

ul.first_level li {
    display: inline;
    background: url("img/list/ul_coffe.png") no-repeat;
    line-height: 20px;

    margin: 25px;
    padding: 4px 105px 4px   20px;

}

Надеюсь, что кому-то это сэкономит пару часов жизни =)

БЛОГ НА HUSL

Как сделать маркированный список в ряд, но с своей картинкой вместо маркера

Ответы (2 шт):