html - 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');
}

背景图像不适用于此处。