如何在CSS中为无序列表设置逗号分隔文本样式 [英] How to style unordered lists in CSS as comma separated text

问题描述

我正在寻找一种方法来在XHTML中使用CSS来编排无序列表，以便它被内联呈现，列表项之间用逗号分隔。

I’m looking for a way to style an unordered list in XHTML with CSS such that it is rendered inline and the list items are separated by commas.

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

For example, the following list should be rendered as apple, orange, banana (note the missing comma at the end of the list).

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

目前，我使用下面的CSS来设置这个列表，但会将列表呈现为苹果，橙子，香蕉，（注意在香蕉后面的逗号）。

Currently, I’m using the following CSS for styling this list, which almost does what I want, but renders the list as apple, orange, banana, (note the trailing comma after banana).

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

#taglist li {
  display: inline;
}

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

$ b <

Is there a way to solve this problem with pure CSS?

推荐答案

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

To remove the trailing comma, use the :last-child pseudo-class, like so:

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

这篇关于如何在CSS中为无序列表设置逗号分隔文本样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！