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来处理它。然后玩边缘，让它按照你想要的排列。

CSS帮助：在列表项中隐藏图像隐藏图标

1 个答案: