html - 如何使用 CSS 在元素之间设置带有元素符号的水平列表的样式？

Question

我不确定如何构建如下所示的水平列表:

规则如下:

• 列表中的元素数量不受限制。
• 每个元素都应该在一行上，而不是换行到第二行。
• 如果有适合的空间，多个元素可以在一行上
• 如果多个元素在一行中，则应使用分隔符将它们分隔
• 分隔线看起来像子弹，但也可以是图片
• 需要它在现代浏览器和 IE8+ 中工作

我不确定如何做的是让元素符号只出现在元素之间，而不是在每行元素之前或之后。

Answer 1

对于那些不必担心 IE8 的人来说，这很简单:

ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }