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

StackOverflow https://stackoverflow.com/questions/209980

  •  03-07-2019
  •  | 
  •  

Вопрос

я пытался

<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, без использования фоновых изображений.

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

#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');
}

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

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

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

Я бы предложил сделать это немного по-другому, в 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;
}

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

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

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

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

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

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

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

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

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

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top