分隔符用于导航
我需要在导航元素之间添加分隔符。 分隔符是图像。
我的HTML结构就像： ol> li> a> img 。
在这里我有两个可能的解决scheme：
- 要添加更多的分离标签（boo！），
- 在每个元素的图像中包含分隔符（这是更好的，但它可能使用户可以点击，例如，“家”，但得到“服务”，因为他们是一个在另一个之后，用户可能会意外地点击分隔符属于“服务”）;
该怎么办？
在li上简单地使用分隔符图像作为背景图像。
要让它只出现在列表项之间，请将图像放置在li的左侧，但不要放在第一个图像的左侧。
例如：
#nav li + li { background:url('seperator.gif') no-repeat top left; padding-left: 10px }
这个CSS将图像添加到每个列表项之后的所有列表项 – 换句话说，除了第一个列表项之外。
NB。 请注意， 相邻的select器 （li + li）在IE6中不起作用，因此您只需将背景图像添加到传统的li（使用条件样式表），并在其中一个边上应用负边距即可。
如果没有迫切需要为分隔符使用图像，则可以使用纯CSS完成此操作。
nav li + li:before{ content: " | "; padding: 0 10px; }
这将在每个列表项之间放置一个条，就像描述的原始问题中的图像一样。 但是因为我们使用的是相邻的select器 ，所以它并没有把条放在第一个元素之前。 而且由于我们使用的是:before伪select器，它不会把一个在最后。
将分隔符添加到li背景中，并确保链接不会展开以覆盖分隔符，这意味着分隔符将不可点击。
对于那些使用Sass的人 ，我已经为此写了一个mixin ：
@mixin addSeparator($element, $separator, $padding) { #{$element+'+'+$element}:before { content: $separator; padding: 0 $padding; } }
例：
@include addSeparator('li', '|', 1em);
哪个会给你这个：
li+li:before { content: "|"; padding: 0 1em; }
把它作为列表元素的背景：
<ul id="nav"> <li><a><img /></a></li> ... <li><a><img /></a></li> </ul> #nav li{background: url(http://img.dovov.comseparator.gif) no-repeat left; padding-left:20px;} /* left padding creates a gap between links */
接下来，我build议使用不同的可访问性标记：
将文本embedded到文本中，而不是将文本embedded到文本中，用跨度包围每个文本，将图像作为背景应用于文本，然后使用显示隐藏文本：无 – 这样可以提供更多的样式灵活性，并允许您使用1px宽的bg图像拼贴，节省带宽，并且可以将其embedded到CSS sprite中，从而节省HTTP调用：
HTML：
<ul id="nav"> <li><a><span>link text</span></a></li> ... <li><a><span>link text</span></a></li> </ul
CSS：
#nav li{background: url(http://img.dovov.comseparator.gif) no-repeat left; padding-left:20px;} #nav a{background: url(http://img.dovov.comnav-bg.gif) repeat-x;} #nav a span{display:none;}
更新 OK，我看到其他人在我之前得到了类似的答案 – 我注意到，约翰还包含一种方法，通过使用li + liselect器来保持分隔符不出现在第一个元素之前，这意味着任何li都会接连出现李。
你可以在你想添加分隔符的位置添加一个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>
在CSS中，您可以添加以下代码。
.divider-vertical-second-menu{ height: 40px; width: 1px; margin: 0 5px; overflow: hidden; background-color: #DDD; border-right: 2px solid #FFF; }
这会提高你的执行速度，因为它不会加载任何图像。 只是testing出来.. 🙂
另一种解决scheme是可以的，但是如果使用：在之后或者在最开始的时候，如果使用：之前没有必要在最后添加分隔符。
所以：
情况：之后
.link:after { content: '|'; padding: 0 1rem; } .link:last-child:after { content: ''; }
情况：之前
.link:before { content: '|'; padding: 0 1rem; } .link:first-child:before { content: ''; }
为了使分隔符相对于菜单文本垂直居中，
.menustyle li + li:before { content: " | "; padding: 0; position: relative; top: -2px; }
我相信这个最好的解决scheme就是我使用的，这是一个自然的CSS边框：
border-right:1px solid;
您可能需要照顾填充，如：
padding-left: 5px; padding-right: 5px;
最后，如果你不想让最后一个有这个分隔的边界，那么在“border-right”中给它的最后一个孩子是“none”：
li:last-child{ border-right:none; }
祝你好运 ：）
