Question

我在div中有一个无序列表，每个列表项都有一个背景图像。但是，该列表在Internet Explorer 8中无法正确显示。

Rendered Output http://img694.imageshack.us/img694/7204/screenshotjv.jpg

问题是列表的左侧和顶部有太多空间。以及每个列表项之间。我希望列表与其上方的图像部分完全齐平，因此左侧，顶部或每个项目之间没有空白区域。

HTML：

<div id="top">
    <div id="topimage">
        <center>
            <img src="image.jpg" alt="image"/>
        </center>
    </div>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS：

#top { 
    width: 255px; 
    float:left; 
    margin:3px; 
}

#topimage {
    width: 245px;
    border:1px solid #bcc5c8;
    padding:3px;
}

.list li {
    background-image:url(../images/list_sub.jpg);
    width: 245px;
    height:23px;
    list-style:inside;
    list-style-image:url(../images/listarrow.gif);
    margin:0px;
    padding:0px;
}

我已经尝试将边距和填充设置为零，但这不起作用。我还检查过以确保图像周围没有额外的空间。有什么建议吗？

Answer 1

以下是您可以调整的一些内容：

将您的列表项内容包裹在跨度中，然后将列表项箭头应用于跨度，为跨度提供略大于箭头gif宽度的填充左侧值。
不要使用list-style-image属性，只需指定list-style：none;得到左对齐x浏览器。一般来说，您应该只使用列表项的背景图像属性而不是列表样式图像，但由于您也有li的背景图像，因此需要额外的跨度。
不要对应用宽度和高度的相同元素应用填充。它们不会呈现跨浏览器。而是在父元素上指定宽度/高度，在内包装元素上指定填充。
通常你应该避免使用id规则，它们非常具体，导致不可重复使用的样式定义。他们难以超越风格定义。
要使列表项彼此接触，请确保它们上指定的行高等于或小于元素的高度。我认为list-item-style会修复它，但也要仔细检查这个设置。

如果这不能解决您的问题，请发布背景图片的链接，我会模拟一个小例子。

为什么div中的无序列表无法正确呈现？

1 个答案: