Справка CSS: плавающее изображение внутри элемента списка скрывает значок

Question

У меня есть изображение в элементе списка, который мне нужен.Все выглядит хорошо в FF / 6 +.Webkit и IE, однако, показывают значок списка в верхней части изображения.Когда я пытаюсь переместить сам элемент списка, значок просто исчезает.Есть ли CSS способ обойти эту проблему?Я попытался обернуть содержимое в промежуток, но до сих пор не нашел решения.Я удалил часть текста, чтобы облегчить код здесь.

<ul class="leftList">
<ul>
    <li>Pillow menu to customize your night's sleep</li>
    <li>Complimentary bathroom amenities</li>
    <li><span class="special_needs_list_item"><a rel="tooltip nofollow" title="Tooltip - Lorem ipsum"><img src="http://teamsite-prod.rccl.com:8030/DOT/img/global/special_needs.png" alt=""></a> Some srooms in this category are wheelchair-accessible.</span></li>
</ul>
</ul>


#ccStateroomFeatures ul {
    float: left;
    width: 320px;
    margin-left: 15px;
    font-size: 12px;
}
#ccStateroomFeatures ul li {
    margin-bottom: 5px;
}
#ccStateroomFeatures .leftList {
    width: 490px;
    float: left;
}

#ccStateroomFeatures .leftList ul,
#ccStateroomFeatures .rightList ul {
    float: none;
    margin-left: 15px;
    width: auto;
}
#ccStateroomFeatures .leftList ul .special_needs_list_item {
    margin:0 0 20px -15px;
    padding-left:15px;

}
#ccStateroomFeatures .leftList ul .special_needs_list_item img {
    float:left;
    margin:3px 5px 0 15px;
    overflow:hidden;
    width:13px;
}

Answer 1

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

Если это так, вы захотите использовать list-style-type: none, чтобы справиться с этим.Затем поэкспериментируйте с полями, чтобы они выстроились в линию так, как вы хотите.