如何使用CSS样式化无序列表为逗号分隔的文本

8 浏览
0 Comments

如何使用CSS样式化无序列表为逗号分隔的文本

我正在寻找一种用CSS在XHTML中对无序列表进行样式设置的方法，使其呈现为内联，并且列表项之间用逗号分隔。

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

    
  
  • apple
    • 
  
  • orange
    • 
  
  • banana
    •

目前，我正在使用以下CSS样式来对该列表进行样式设置，几乎可以实现我想要的效果，但是在banana后面会多出一个逗号，呈现为apple, orange, banana,。

#taglist {
  display: inline;
  list-style: none;
}
#taglist li {
  display: inline;
}
#taglist li:after {
  content: ", ";
}

是否有一种纯CSS的方法来解决这个问题呢？

0

3 答案

0 Comments

问题：如何使用CSS样式化无序列表为逗号分隔的文本？

解决方法：为了去除末尾的逗号，可以使用`:last-child`伪类，如下所示：

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

这是最简单的方法，但是`last-child`的实现比`first-child`还要少，尽管这取决于网站的使用情况，可以通过JS/jQuery、IE的条件注释等来进行补偿（参考：quirksmode.org/css/contents.html）。

我没有相关数据，但我认为不支持`first-child`和`last-child`的浏览器本身就不支持`before`、`after`和`content`。

太棒了。非常感谢。这个解决方法在Mac OS X的Safari 4.0.3和FireFox 3.5.2上运行良好。

`last-child`在IE8中不支持，可以使用`first-child`选择器代替，或者使用我提供的解决方案。

0
0 Comments

如何用CSS样式化无序列表为逗号分隔的文本

问题的原因：

有时候我们希望将无序列表的每个项目用逗号分隔开来，以实现一种特定的排版效果。然而，HTML中的无序列表本身并不提供直接的方法来实现这个效果。因此，我们需要使用CSS来实现这个排版需求。

解决方法：

在CSS3中，我们可以使用伪选择器last-child 和 not 同时使用来实现这个效果。具体代码如下：

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

你可以在这里查看效果：https://jsfiddle.net/vpd4bnq1/

0
0 Comments

如何在CSS中将无序列表样式化为逗号分隔的文本

问题的出现原因是作者不满意之前的解决方案，因为它在列表项之间添加了空格，并且在文本换行时表现不佳。

解决方法是使用另一种CSS规则来替代之前的规则。新的规则使用了伪元素和CSS选择器来在列表项之前添加逗号，并且只需要一条规则就能完成所有的工作。此外，作者还指出在列表项上添加了浮动属性（float: left）可以解决列表项之间的空格问题。

这种解决方法的优点是只需要一条规则就能完成样式化的工作，不需要额外的规则来取消之前的规则，并且支持IE8。然而，它在文本换行时的表现不佳。

，这种解决方法是一种聪明的方式来将无序列表样式化为逗号分隔的文本，但是需要注意的是在文本换行时可能会出现一些问题。

0