LI类中的图像

Question

我想让我的bullet-point.png图像显示在我的每个导航/ li菜单选项的右侧。

我使用了一些无效的HTML5，但我更愿意这样做。这是我之前的截图，因此它解释了我的追求。 （我之前刚刚在每个菜单项上添加了多个字符串）。我认为最好将每个菜单项分配给定义了背景图像的类。

下面的HTML / CSS显示屏幕截图的导航，但没有任何项目符号图像。知道为什么吗？

HTML

<nav class="nav">
                <div class="span12">
                    <ul>
                        <li class="bullet-point"><a href="#" class="active">HOME</a></li>
                        <li class="bullet-point"><a href="#">PROJECTS</a></li>
                        <li class="bullet-point"><a href="#">CASE STUDIES</a></li>
                        <li class="bullet-point"><a href="#">PROFILE</a></li>
                        <li class="bullet-point"><a href="#">NEWS &#38; EVENTS</a></li>
                        <li class="bullet-point"><a href="#">LOCATION</a></li>
                        <li class="bullet-point"><a href="#">CONTACT</a></li>
                    </ul>
                </div>
            </nav>

CSS

.bullet-point {
    margin-top: -5px;
    margin-right: 10px;
    background: url('img/bullet-point.png');
}

Answer 1

小提琴：http://jsfiddle.net/avinvarghese/eemTZ/

Css：

    .bullet-point {
        margin-top: -5px;
        margin-right: 10px;
        list-style:none;
        float:left;
    }
    .bullet-point:after {
        content:" • ";
    }
    .bullet-point:last-child:after {
        content: "";
}

Answer 2

应该是

ul {
   list-style-image: url('img/bullet-point.png');
}

背景图片不适用于此。