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

Question

我正在寻找一种使用 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解决这个问题？

Answer 1

要删除尾随逗号，请使用

:last-child

伪类，如下所示：

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

Answer 2

替换一个你的规则

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

与只是另一个

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

优点：

• 一条规则即可完成所有工作。
• 没有取消之前规则的规则，
• IE8支持

Answer 3

使用 CSS3 很容易，您可以同时使用伪选择器

last-child

和

not

：

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

在此处检查结果https://jsfiddle.net/vpd4bnq1/

Answer 4

这取决于浏览器的实现，但这应该可行。尽管它依赖于

first-child

，这可能会限制其使用，但本质上是将逗号空格

", "

放在列表项之前，而不是之后。我不确定

padding

/

margin

s 会如何影响这一点，但如果你使用 `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: "";
        }

尽管逗号奇怪地漂浮在不知名的地方，而且说实话，无论如何我更喜欢接受的答案。但正因为如此，我才不会留下一个严重损坏的答案，我想我应该修复它。

谢谢，雅各布。

Answer 5

这是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>

Answer 6

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

您可能可以在最后一个 li 上使用

last

类，并为除最后一个之外的所有 li 使用背景图像，但您将无法在 IE 中执行 :last-child 和 content: 。