CSS 导航分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5688791/
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
Separators For Navigation
提问by daGrevis
I need to add separators between elements of navigation. Separators are images.
我需要在导航元素之间添加分隔符。分隔符是图像。
My HTML structure is like: ol>li>a>img.
我的 HTML 结构是这样的：ol>li>a>img。
Here I come to two possible solutions:
在这里，我提出了两种可能的解决方案：
- To add more litags for separation (boo!),
- Include separator in image of each element (this is better, but it makes possibility that user may click on, example, "Home", but get to "Services", because they are one behind the other and user may accidentally click on separator that belongs to "Services");
- 要添加更多用于分隔的li标签（嘘！），
- 在每个元素的图像中包含分隔符（这更好，但它使用户可能点击，例如“主页”，但进入“服务”，因为它们是一个在另一个后面，用户可能会不小心点击分隔符属于“服务”）；
What to do?
该怎么办？
采纳答案by ajcw
Simply use the separator image as a background image on the li.
只需将分隔符图像用作li.
To get it to only appear in between list items, position the image to the left of the li, but not on the first one.
要使其仅出现在列表项之间，请将图像放置在 的左侧li，而不是第一个。
For example:
例如：
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
This CSS adds the image to every list item that follows another list item - in other words all of them but the first.
此 CSS 将图像添加到另一个列表项之后的每个列表项中 - 换句话说，除了第一个之外的所有列表项。
NB. Be aware the adjacent selector(li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.
注意。请注意，相邻选择器(li + li) 在 IE6 中不起作用，因此您只需将背景图像添加到常规 li（使用条件样式表），并可能对其中一个边缘应用负边距。
回答by jrue
If there isn't a pressing need to use images for the separators, you could do this with pure CSS.
如果没有迫切需要使用图像作为分隔符，您可以使用纯 CSS 来做到这一点。
nav li + li:before{
content: " | ";
padding: 0 10px;
}
This puts a bar between each list item, just as the image in the original question described. But since we're using the adjacent selectors, it doesn't put the bar before the first element. And since we're using the :beforepseudo selector, it doesn't put one at the end.
这会在每个列表项之间放置一个横杠，就像原始问题中描述的图像一样。但是由于我们使用了相邻的选择器，它不会将栏放在第一个元素之前。因为我们使用的是:before伪选择器，所以它不会在最后放置一个。
回答by Rajiv Pingale
You can add one lielement where you want to add divider
您可以li在要添加分隔线的位置添加一个元素
<ul>
<li> your content </li>
<li class="divider-vertical-second-menu"></li>
<li> NExt content </li>
<li class="divider-vertical-second-menu"></li>
<li> last item </li>
</ul>
In CSS you can Add following code.
在 CSS 中，您可以添加以下代码。
.divider-vertical-second-menu{
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
This will increase you speed of execution as it will not load any image. just test it out.. :)
这将提高您的执行速度，因为它不会加载任何图像。只是测试一下.. :)
回答by T04435
The other solution are OK, but there is no need to add separator at the very last if using :afteror at the very beginning if using :before.
另一个解决方案是可以的，但是如果使用:after则不需要在最后添加分隔符，如果使用:before则不需要在最开始添加分隔符。
SO:
所以：
case :after
案例：之后
.link:after {
content: '|';
padding: 0 1rem;
}
.link:last-child:after {
content: '';
}
case :before
案例：之前
.link:before {
content: '|';
padding: 0 1rem;
}
.link:first-child:before {
content: '';
}
回答by user7149870
To get the separator vertically centered relative to the menu text,
要使分隔符相对于菜单文本垂直居中，
.menustyle li + li:before
{
content: " | ";
padding: 0;
position: relative;
top: -2px;
}
回答by Avi
I believe the best solution for this, is what I use, and that is a natural css border:
我相信最好的解决方案是我使用的，这是一个自然的 css 边框：
border-right:1px solid;
You might need to take care of padding like:
您可能需要处理如下填充：
padding-left: 5px;
padding-right: 5px;
Finally, if you don't want the last li to have that seperating border, give it's last-child "none" in "border-right" like this:
最后，如果你不希望最后一个 li 有那个单独的边框，在“border-right”中给它的最后一个孩子“none”像这样：
li:last-child{
border-right:none;
}
Good luck :)
祝你好运 ：）
回答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 Soufiane Hassou
Add the separator to the libackground and make sure the link doesn't expand to cover the separator, which means the separator won't be click-able.
将分隔符添加到li背景并确保链接不会扩展到覆盖分隔符，这意味着分隔符将无法点击。
回答by Faust
Put it in as a background on the list element:
将其作为列表元素的背景：
<ul id="nav">
<li><a><img /></a></li>
...
<li><a><img /></a></li>
</ul>
#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;}
/* left padding creates a gap between links */
Next, I recommend a different markup for accessibility:
Rather than embedding the images inline, put text in as text, surround each with a span, apply the image as a background the the , and then hide the text with display:none -- this gives much more styling flexibilty, and allows you to use tiling with a 1px wide bg image, saves bandwidth, and you can embed it in a CSS sprite, which saves HTTP calls:
接下来，我推荐一个不同的可访问性标记：
而不是嵌入图像内联，将文本作为文本放入，用跨度包围每个，将图像应用为背景 the ，然后使用 display:none 隐藏文本 - this提供了更多的样式灵活性，并允许您对 1px 宽的 bg 图像使用平铺，节省带宽，并且您可以将其嵌入到 CSS 精灵中，从而节省 HTTP 调用：
HTML:
HTML：
<ul id="nav">
<li><a><span>link text</span></a></li>
...
<li><a><span>link text</span></a></li>
</ul
CSS:
CSS：
#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;}
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}
UPDATEOK, I see others got similar answer in before me -- and I note that John also includes a means for keeping the separator from appearing before the first element, by using the li + li selector -- which means any li coming after another li.
更新好的，我看到其他人在我之前得到了类似的答案——我注意到 John 还包含了一种通过使用 li + li 选择器来防止分隔符出现在第一个元素之前的方法——这意味着任何 li 接踵而至里
