css - 列表样式图像不工作 : no markers present

Question

这是我的 CSS:

#navcontainerF ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: url('img/sqpurple.gif');
text-align: center;
border-style:solid;
border-top:thin dashed #D2BDBE;
border-left:thin dashed #D2BDBE;
border-right:thin dashed #D2BDBE;
border-bottom:thin dashed #D2BDBE;
}

#navcontainerF ul li { display: inline; }

#navcontainerF ul li a
{   
    text-decoration: underline;
    padding: .2em 1em;
}

这是我的 HTML:

<div id="navcontainerF">
    <ul>
        <li><a href="page1.php">Page 1</a></li>
        <li><a href="page2.php">Page 2</a></li>
        <li><a href="page3.php">Page 3</a></li>
        <li><a href="page4.php">Page 4</a></li>
    </ul>
</div>

我希望看到带有标记 的元素符号列表，但没有出现这样的标记。 我肯定有“list-style-image”的正确图像 url。 可能是什么问题？

非常感谢， 哈利

Answer 1

确保图片路径是相对于 CSS 文件的，而不是 HTML 文件。因此，如果您将样式表放在一个名为 CSS 的文件夹中，那么您必须将:

list-style-image: url('../img/sqpurple.gif');