Как я могу дать каждому <li>свое собственное изображение маркера?

Question

Я пытался

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

с

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

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

Edit: я обнаружил, что, несмотря на то, что Firebug говорит мне, правило изображения стиля списка каким-то образом переопределяется. Если я приведу правило, вот так:

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

тогда все хорошо. Поскольку у меня нет других правил в выполняемом тестовом примере, который содержит ul или li в селекторе, я не уверен, почему встраивание дает другой результат.

Answer 1

Попробуйте это:

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

Answer 2

Я не уверен, что это ваша проблема, но вы используете относительные ссылки на ваши изображения. Когда вы используете относительные ссылки в CSS, это относительно файла CSS, но если он встроенный, он будет относительно HTML-страницы.

Answer 3

Сначала определите, находитесь ли вы в режиме «причуд» или нет, потому что для многих свойств CSS это имеет значение.

Во-вторых, W3c указывает , что URL должен быть в двойных кавычках (хотя я также не использую кавычки). Пойдите со спецификацией, чтобы избежать неприятностей.

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

Answer 4

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

ПРИМЕЧАНИЕ: В обоих Firefox и т. Д.

Answer 5

Я бы никогда не подумал. Если я приведу URL, например, так:

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

начинает работать. Я цитирую это, и это останавливается. Я думал, что это не должно иметь значение.

Спасибо всем за помощь.

Answer 6

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

Answer 7

Я бы посоветовал сделать это немного по-другому, в CSS - т.е.

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

Answer 8

Мне больно предлагать это, но вы пробовали! Важный флаг? Кроме того, он ведет себя так же в других браузерах? Что если это то, что есть в вашем файле Firefox userChrome.css?

Answer 9

Не могли бы вы попробовать добавить list-style-type: none; в # список контактов? Возможно, даже вместо вашего стиля списка: объявление.

Answer 10

Вы можете попробовать добавить! Важное после свойства list-style-image, что предотвратит его переопределение.