列表样式图像不起作用：不存在标记

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”的正确图像网址。 可能是什么问题？

非常感谢，哈利

Answer 1

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

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

Answer 2

尝试添加左边填充以便为它们提供一些空间

#navcontainerF ul {
    padding-left: 40px;
}

或者把它们放在里面：

#navcontainerF ul {
    list-style-position: inside;
}