如何在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/ margins会如何影响这个,但如果你使用`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: "";
        }

虽然逗号奇怪地漂浮在中间,但老实说,我更喜欢接受的答案.但就是这样,我并没有留下一个可怕的破解答案,我想我应该解决它.

谢谢你,雅各布.