Запрос типа изображения списка

Question

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

Я создал класс с именем .bullet и установил list-type-image для моего зеленого треугольного изображения..

Затем установите <ul class="bullet"><li>a</li></ul>, но безрезультатно, так как я бы подумал, что "a" придет как "> a"

Есть идеи?

Спасибо.

Answer 1

Можете ли вы опубликовать свой CSS?

это должно выглядеть так:

list-style-image: url(greentriangle.gif)

Answer 2

Другой подход заключается в использовании фонового изображения CSS:

ul.bullet { list-style-type: none; margin: 0; padding: 0; }
ul.bullet li { background: url(greentriangle.gif) top left no-repeat; padding-left: 10px; }

<ul class="bullet">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

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

ul.bullet { list-style-type: none; margin: 0; padding: 0; }
ul.bullet li { background: url(normaltriangle.gif) top left no-repeat; padding-left: 10px; }
ul.bullet li.green { background: url(greentriangle.gif) top left no-repeat; padding-left: 10px; }

<ul class="bullet">
    <li>One</li>
    <li class="green">Two</li>
    <li>Three</li>
</ul>

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

Надеюсь, это поможет вам, миндалины!