如何风格无序列表中的CSS为逗号分隔文本(How to style unordered lists

我正在寻找一种方式来风格XHTML无序列表的CSS使得它内联呈现和列表项之间用逗号隔开。

例如，下面的列表应该呈现为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旨意影响，但是如果你使用`显示：内联; 有边距和填充设置为零，它应该没问题。

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

这是一个在人的方式列表除了在他们的文章“推荐驯服清单 “：

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

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

这需要在你的名单贴上了最后一个项目class的“最后”的属性值：

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

Answer 6:

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

你也许可以得到接近与使用last的最后李类和使用背景图像对所有LIS但最后，但你不能做：最后的孩子和内容：在IE中。

文章来源: How to style unordered lists in CSS as comma separated text