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

我正在寻找一种方式来使用CSS对XHTML中的无序列表进行样式化，使其呈现为内联，并且列表项由逗号分隔。

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

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

目前，我使用下面的CSS来devise这个列表的样式，这个列表几乎是我想要的，但是将列表呈现为apple, orange, banana, （注意香蕉之后的尾随逗号）。

 #taglist { display: inline; list-style: none; } #taglist li { display: inline; } #taglist li:after { content: ", "; } 

有没有办法解决纯CSS的这个问题？

Answer 1

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

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

Answer 2

replace你的规则

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

只有一个

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

优点：

• 一个规则是做所有的工作 。
• 没有规则取消以前的规则，
• IE8支持

Answer 3

这取决于浏览器的实施，但这应该工作。 虽然它依赖于first-child ，这可能会限制它的使用，但基本上把逗号空间", "放在列表项之前，而不是之后。 我不知道如何padding / margin会影响这一点，但如果你使用`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: ""; } 

虽然这些逗号奇怪地处于无中生有的地位，而且说实话，我更喜欢接受的答案。 但是，我并没有留下一个可怕的破碎的答案，我认为我应该修复它。

谢谢，Jakob。

Answer 4

这是A List Apart在他们的文章“ Taming Lists ”中推荐的方式：

 #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> 

Answer 5

使用CSS3很容易，您可以使用伪select器last-child而not一次：

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

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

Answer 6

没有纯CSS的方式来做到这一点跨浏览器兼容（感谢微软）。 我build议你只用服务器端的逻辑来做。

你可以近距离使用last堂课的最后last堂课，并且使用背景图片，而不是last堂，但是你将无法做到：最后一个孩子和内容：在IEs中。