如何在CSS中将无序列表设置为逗号分隔的文本

我正在寻找一种使用CSS对XHTML中的无序列表进行样式设置的方法，以使其以内联方式呈现，并且列表项之间以逗号分隔。

例如，以下列表应呈现为apple, orange, banana（请注意列表末尾缺少逗号）。

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

当前，我正在使用以下CSS来设置此列表的样式，这几乎可以完成我想要的操作，但是将列表呈现为apple, orange, banana,（请注意，香蕉后的逗号结尾）。

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

有没有办法用纯CSS解决此问题？

要删除结尾的逗号，请使用:last-child伪类，如下所示：

#taglist li:last-child:after {
    content: "";
}

替换一条规则

#taglist li:after {
    content: ", ";
}

与只是一个又一个

#taglist li + li:before {
    content: ", ";
}

优点：

• 一条规则做好所有工作。
• 没有取消前一条规则的规则，
• IE8支持

这很容易用CSS3，你可以使用伪选择last-child和not一次：

ul#taglist li:not(:last-child):after {
    content: ", ";
}

在这里检查结果https://jsfiddle.net/vpd4bnq1/

这取决于浏览器的实现，但这应该可行。尽管它依赖first-child，这可能会限制其使用，但实际上将逗号空间", "放在列表项之前，而不是之后。我不确定padding/ margins将如何影响这一点，但是如果您使用`display：inline; 将边距和填充设置为零，就可以了。

#taglist li:before {content: ", ";}
#taglist first-child {content: ""; } /* empty string */

编辑：回应雅各布评论中提供的更正。

以下作品（此处为演示页面： http://davidrhysthomas.co.uk/so/liststyles.html：

#taglist    {width: 50%;
        margin: 1em auto;
        padding: 0;
        }

li      {display: inline;
        margin: 0;
        padding: 0;
        }

li:before   {content: ", ";
        }

#taglist li:first-child:before
        {content: "";
        }

尽管逗号奇怪地浮在中间，但老实说，我还是更喜欢公认的答案。但是就是这样，我并没有留下一个可怕的错误答案，我想我应该解决它。

谢谢，雅各布。

这是A List Apart的成员在他们的文章“驯服列表”中推荐的方式：

#taglist ul li:after {
    content: ",";
}

#taglist ul li.last:after {
    content: "";
}

这要求您的列表中的最后一项标记有class属性值“ last”：

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li class="last">banana</li>
</ul>

没有跨浏览器兼容的纯CSS方法（感谢Microsoft）。我建议您只使用服务器端逻辑。

您可能会last在最后一个li上使用一个类并为所有lis（但不是最后一个）使用背景图像来接近，但是您将无法在IE中执行：last-child和content：。