CSS 帮助 : floating an image inside a list item hides icon

Question

我在需要 float 的列表项中有一张图片。在 FF/6+ 中一切看起来都很好。然而，Webkit 和 IE 会在图像顶部显示列表图标。当我尝试 float 列表项本身时，图标就消失了。有解决此问题的 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 来处理它。然后调整边距，使其按您想要的方式排列。