CSS LI 元素的文本分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6285359/
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
Text Separators for LI Elements
提问by Frank
I'd like to add a forward slashes ('/') between my li elements, but I'm not sure of the best way to do that semantically. Right now, I'm simply including the forward slash in the li tag and adding spacing with non-breaking spaces, like so:
我想在我的 li 元素之间添加一个正斜杠 ('/')，但我不确定在语义上做到这一点的最佳方法。现在，我只是在 li 标记中包含正斜杠并添加带有不间断空格的间距，如下所示：
<ul id="footer_menu">
<li>Customer Support /</li>
<li>Shipping Info /</li>
<li>Size Charts /</li>
<li>Privacy Policy /</li>
<li>Contact</li>
</ul>
What do you think? Thanks.
你怎么认为？谢谢。
回答by Kyle Sletten
You can use pseudo-elements to include text after an element and you can use CSS3 selectors to remove the trailing slash from the last element.
您可以使用伪元素在元素之后包含文本，并且可以使用 CSS3 选择器从最后一个元素中删除尾部斜杠。
#footer_menu li:after {
content: "/";
}
#footer_menu li:last-child:after {
content: "";
}
EDIT:
编辑：
The whole thing can be done in one line with better CSS3.
使用更好的 CSS3 可以在一行中完成整件事。
#footer_menu li:nth-child(n+2):before {
content: "/";
}
EDIT: EDIT:
编辑： 编辑：
It's even easier than that.
它甚至比这更容易。
#footer_menu li + li:before {
content: "/";
}
回答by klassmann
This is my solution for LI element separated by | (pipe) :
这是我对由 | 分隔的 LI 元素的解决方案 （管道） ：
li + li:before {
content: " | ";
}
The adjacency combinator (a plus sign, +) comes in very handy in this case. It allows you to style an element if it has been directly preceded by another specified element. Since the first li is not preceded by another li, it won't have the content prepended to it. This is much less typing than:
在这种情况下，邻接组合器（加号，+）非常方便。如果一个元素之前直接有另一个指定的元素，它允许您设置样式。由于第一个 li 前面没有另一个 li，因此不会在其前面添加内容。这比以下打字少得多：
li:before {
content: " | ";
}
li:first-child:before {
content: "";
}
回答by d4nyll
For those using Sass, I have written a mixinfor this purpose:
@mixin addSeparator($element, $separator, $padding) {
#{$element+'+'+$element}:before {
content: $separator;
padding: 0 $padding;
}
}
Example:
例子：
@include addSeparator('li', '|', 1em);
Which will give you this:
这会给你这个：
li+li:before {
content: "|";
padding: 0 1em;
}
回答by Ian Devlin
You could put the li content in a span and then use CSS:
您可以将 li 内容放在一个跨度中，然后使用 CSS：
ul#footer_menu li span:after { content:"/"; padding:0 5px; }
Or something similar.
或者类似的东西。
editAh like Kyle said, but the addition of the last_child rule is more complete.
编辑啊像Kyle说的一样，但是last_child规则的添加更完整。
回答by tomoguisuru
If you're trying to do something like Customer Support / Shipping Info / Size Charts / Privacy Policy / Contact You could just do it with some CSS
如果您正在尝试执行诸如客户支持 / 运输信息 / 尺码表 / 隐私政策 / 联系方式之类的操作，您可以使用一些 CSS 来完成
You'll need to add the "first" class to the first li in your set like the following
您需要将“第一个”类添加到集合中的第一个 li，如下所示
<ul id="footer_menu">
<li class="first">Customer Support /</li>
<li>Shipping Info /</li>
<li>Size Charts /</li>
<li>Privacy Policy /</li>
<li>Contact</li>
</ul>
And then the following CSS
然后下面的CSS
#footer_menu ul {
float: left;
padding: 10px;
list-style: none outside none;
}
#footer_menu li {
border-left: 2px solid #000000;
float: left;
padding: 0 10px;
}
#footer_menu li.first {
border: none;
}
This will put all the li elements next to each other and give you a border. The result will look something like
这会将所有 li 元素放在一起并为您提供边框。结果看起来像
Customer Support | Shipping Info | Size Charts | Privacy Policy | Contact
客户支持 | 航运信息 | 尺码表 | 隐私政策 | 接触
