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将如何影响这一点，但是如果你使用`display：inline;边距和填充设置为零，它应该没问题。

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

已编辑：以回应Jakob在评论中提供的更正。

以下作品（此处的演示页： 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的人在他们的文章“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 6

没有纯粹的css方式可以实现跨浏览器兼容（感谢Microsoft）。我建议你只使用服务器端逻辑。

你可能接近在最后一个li上使用last类并且使用背景图像用于所有lis但是最后一个，但是你将无法做到：last-child和content：在IE中。

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

6 个答案: