html css项目符号列表垂直问题

Question

HTML：

<ul class="fruits">
<li>Peach</li>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Strawberry</li>
</ul>

CSS：

.fruits ul
{
list-style-type:none;
padding:0px;
margin:0px;
}

.fruits ul li
{
background-image:url('http://www.myurl.co.uk/images/mybullet.png');
background-repeat:no-repeat;
background-position:0px 5px; 
padding-left:14px;
}

我在页面上还有其他水平导航菜单，因此需要按上述分类。当我尝试尝试时，它默认只返回一个项目符号列表，并且不起作用。我尝试只使用 并且它起作用了，但是把页面的其余部分弄乱了。对于具有特定类的正常垂直项目符号列表有什么建议吗？

Answer 1

试试这个：

ul.fruits
{
list-style-type:none;
padding:0px;
margin:0px;
}

我为你做了一个 jsfiddle here。我已经删除了背景样式，所以不要忘记重新插入它们。