css - 列表项背景图像 - 相邻 float 内容重叠

Question

在过去，我已经为自定义元素符号使用了数百次列表项背景图像，但不知何故从未遇到过这个问题。

基本上，我有一个 IMG float 在无序列表的左侧。元素符号背景图像设置在每个 LI 的左上角。但是， float 图像覆盖了元素符号，因为浏览器将列表视为它仍然是全宽的(就好像 float 图像几乎不存在一样)。

这个有点难解释。所以这是一个带有注释的屏幕截图。 http://img695.imageshack.us/img695/1328/cssquestion.jpg

以下是一些代码片段(抱歉，目前无法上传到服务器):

<h2>About Us</h2>
            <img src="image.jpg" class="img-left" />
            <h3>Heading</h3>
            <p>Text</p>

            <ul>
                <li>List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>



    ul {
padding: 0; 
margin: 0;
}
    ul li {
background: url(../images/bg-main-bullet.gif) top left no-repeat; 
list-style: none; 
padding: 0; 
margin: 0;
}

.img-left {float: left; margin: 0 19px 0 0;}

有没有人知道如何实现我想要的结果？

非常感谢任何提示或意见!谢谢

Answer 1

列表的默认样式位置是“外部”，这意味着它们出现在相关填充或边距之外。大概您在列表或列表项上有一些边距或填充，将它们推过该图形的右侧。

修复方法是将列表样式位置设置为“内部”。尝试将其添加到您的样式表(自定义 ul 的特性以满足您的需要):

ul{ list-style-position: inside; }