Html 如何将 CSS 中的无序列表设置为逗号分隔文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1517220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style unordered lists in CSS as comma separated text
提问by SwedishChef
I'm looking for a way to style an unordered list in XHTML with CSS such that it is rendered inline and the list items are separated by commas.
我正在寻找一种使用 CSS 在 XHTML 中设置无序列表样式的方法，这样它就可以内联呈现并且列表项用逗号分隔。
For example, the following list should be rendered as apple, orange, banana(note the missing comma at the end of the list).
例如，以下列表应呈现为apple, orange, banana（注意列表末尾缺少的逗号）。
<ul id="taglist">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
Currently, I'm using the following CSS for styling this list, which almost does what I want, but renders the list as apple, orange, banana,(note the trailing comma after banana).
目前，我正在使用以下 CSS 来设置此列表的样式，这几乎符合我的要求，但将列表呈现为apple, orange, banana,（注意香蕉后的尾随逗号）。
#taglist {
display: inline;
list-style: none;
}
#taglist li {
display: inline;
}
#taglist li:after {
content: ", ";
}
Is there a way to solve this problem with pure CSS?
有没有办法用纯 CSS 解决这个问题？
回答by Jakob
To remove the trailing comma, use the :last-childpseudo-class, like so:
要删除尾随逗号，请使用:last-child伪类，如下所示：
#taglist li:last-child:after {
content: "";
}
回答by Vladimir Starkov
Replace oneyour rule
替换一个你的规则
#taglist li:after {
content: ", ";
}
with justanother one
与只是一个又一个
#taglist li + li:before {
content: ", ";
}
Pros:
优点：
- One rule do all the work.
- No rules for cancel previous rule,
- IE8Support
- 一个规则做所有的工作。
- 没有取消先前规则的规则，
- IE8支持
回答by OzzyCzech
It's easy with CSS3 you can use pseudo selector last-childand notat once:
这很容易用CSS3，你可以使用伪选择last-child和not一次：
ul#taglist li:not(:last-child):after {
content: ", ";
}
Check results here https://jsfiddle.net/vpd4bnq1/
回答by David says reinstate Monica
It depends on browser implementation, but this should work. Though it relies on first-child, which may limit its use, but essentially puts the comma-space ", "before the list-item, rather than after. I'm not sure how padding/margins will affect this, but if you use `display: inline; with margins and padding set to zero, it should be okay.
这取决于浏览器的实现，但这应该有效。尽管它依赖于first-child，这可能会限制其使用，但本质上将逗号空格", "放在列表项之前，而不是之后。我不确定padding/ margins 会如何影响这一点，但是如果您使用 `display: inline; 边距和填充设置为零，应该没问题。
#taglist li:before {content: ", ";}
#taglist first-child {content: ""; } /* empty string */
Edited:to respond to corrections offered in comments by Jakob.
编辑：回应 Jakob 在评论中提供的更正。
The following works (demo page here: http://davidrhysthomas.co.uk/so/liststyles.html:
以下作品（演示页面在这里： 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: "";
}
Although the commas are strangely floating-in-the-middle-of-nowhere, and, honestly, I prefer the accepted answer anyway. But just so's I wasn't leaving a horribly broken answer lying around, I thought I should fix it.
虽然逗号奇怪地漂浮在中间，但老实说，无论如何我更喜欢接受的答案。但就这样，我并没有留下一个可怕的破碎答案，我想我应该修复它。
Thanks, Jakob.
谢谢，雅各布。
回答by Jamie Dixon
This is the way that the guys at A List Apartrecommend in their article “Taming Lists":
这是A List Apart 的人在他们的文章“驯服列表”中推荐的方式：
#taglist ul li:after {
content: ",";
}
#taglist ul li.last:after {
content: "";
}
This requires having the last item in your list tagged with a classattribute value of “last”:
这需要将列表中的最后一项标记class为“last”属性值：
<ul id="taglist">
<li>apple</li>
<li>orange</li>
<li class="last">banana</li>
</ul>
回答by meder omuraliev
There is no pure css way to do it that's cross-browser compatible ( thanks to Microsoft ). I suggest you just do it with server-side logic.
没有跨浏览器兼容的纯 css 方法（感谢 Microsoft ）。我建议你只用服务器端逻辑来做。
You can probably get close with using a lastclass on the last li and using background images for all lis but the last, but you will not be able to do :last-child and content: in IEs.
您可能可以last在最后一个 li 上使用一个类并为除最后一个之外的所有 li 使用背景图像，但您将无法在 IE 中执行 :last-child 和 content: 。
