以Lea的演示为例，这里有一种不同的制作无序列表的方法，带有边框:http://jsfiddle.net/vX4K8/7/

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

CSS

ul {
list-style: none;
margin: 0;
}

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}

我使用jQuery来实现这个:

jQuery('li').wrapInner('<span class="li_content" />');

&与一些CSS:

li { color: red; }
li span.li_content { color: black; }

也许有点过分，但如果你是为CMS编写代码，而你不想让编辑在每个列表项中添加额外的span，这很方便。

我建议给LI一个背景图像和左填充。list-style-image属性在跨浏览器环境中很脆弱，没有必要添加一个额外的元素，比如span。所以你的代码最终看起来是这样的:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

我简单地像这样解决了这个问题，它应该在所有浏览器中工作:

申力 颜色:红 的 申里思潘 颜色:蓝色; 的 <德> < li > <跨越> Foo -跨越> < < li > < li > <跨越> < /跨越> < li >酒吧 < li > <跨越蝙蝠> < /跨越> < li > < /德>

一种方法是使用li:before和content: ""并将其样式化为内联块元素。

下面是一个工作代码片段:

ul { list-style-type: none; /* no default bullets */ } ul li { font-family: Arial; font-size: 18px; } ul li:before { /* the custom styled bullets */ background-color: #14CCBB; border-radius: 50%; content: ""; display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 10px; width: 10px; } <ul> <li>Swollen joints</li> <li>Pain in hands and knees</li> <li>Redness around joints</li> <li>Constant fatigue</li> <li>Morning stiffness in joints</li> <li>High fevers</li> <li>Rheumatoid nodules, which develop around joints</li> </ul>

你能做的最简单的事情是将<li>的内容包装在<span>或等效的内容中，然后你可以独立地设置颜色。

或者，你也可以用你想要的项目符号颜色制作一张图片，并用list-style-image属性设置它。