分隔符用于导航

我需要在导航元素之间添加分隔符。 分隔符是图像。

元素之间的分隔符。

我的HTML结构就像: ol> li> a> img

在这里我有两个可能的解决scheme:

  1. 要添加更多的分离标签(boo!),
  2. 在每个元素的图像中包含分隔符(这是更好的,但它可能使用户可以点击,例如,“家”,但得到“服务”,因为他们是一个在另一个之后,用户可能会意外地点击分隔符属于“服务”);

该怎么办?

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; } 

祝你好运 :)