在列表元素不工作之前添加图像

Question

我使用Sass有以下css，但出于某种原因我只得到1张图片，甚至不知道哪个元素正在添加它。

            ul {
                position: relative;

                li {
                    font: normal 18px/22px Arial, sans-serif;
                    list-style-type: none;

                }

                li:before {
                    background: url(img/sprite2.png") no-repeat scroll -372px -391px rgba(0, 0, 0, 0);
                    content: "";
                    height: 25px;
                    left: 0;
                    position: absolute;
                    top: 8px;
                    width: 20px;
                    list-style-type: none;
                }
            }

Answer 1

由于li:before绝对定位，您需要相对定位每个li，以便相应的:before相对于其父li定位。否则，所有:before个伪元素都相对于ul定位，当然它们都堆叠在一起。

li {
    position: relative;
    font: normal 18px/22px Arial, sans-serif;
    list-style-type: none;
}

Answer 2

从样式中删除“顶部”，你没事。 这是一个jsFiddle：http://jsfiddle.net/4L9je4tx/

ul 
{
    position: relative;
}
li 
{
    font: normal 18px/22px Arial, sans-serif;
    list-style-type: none;
}
li:before 
{
    background: url("img/sprite.png") no-repeat scroll -372px -391px rgba(0, 0, 0, 0);
    content: "";
    height: 25px;
    left: 0;
    position: absolute;
    width: 20px;
    list-style-type: none;
}