导航分离器

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

Separators between elements.

我的 HTML 结构类似于: ol > li > a > img。

这里我提出两种可能的解决方案:

  1. 为了增加更多的 li分离标签(嘘!) ,
  2. 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");

怎么办？

112111 次浏览
小开

将分隔符添加到 li背景，并确保链接不会扩展到覆盖分隔符，这意味着分隔符将不能单击。

小开
最佳答案

Simply use the separator image as a background image on the li.

若要使其仅出现在列表项之间，请将图像放在 li的左侧，但不要放在第一个列表项上。

例如:

#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}

这个 CSS 将图像添加到另一个列表项后面的每个列表项中——换句话说，除了第一个列表项之外的所有列表项。

注意。请注意，相邻的选择器(li + li)在 IE6中无法工作，因此您只能将背景图像添加到传统的 li 中(使用条件样式表) ，并可能在其中一条边上应用负边距。

小开

把它作为 list 元素的背景:

<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 */

接下来，我推荐一种不同的可访问性标记:
与其将图片嵌入到行内，将文本作为文本，环绕每一个跨度，应用图片作为背景，然后隐藏文本显示: 无-这给了更多的样式灵活性，并允许您使用1px 宽的 bg 图像平铺，节省带宽，你可以将其嵌入到一个 CSS 精灵，这节省 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(/images/separator.gif) no-repeat left; padding-left:20px;}
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

更新 好的，我看到其他人在我之前得到了类似的答案——我注意到 John 还提供了一种方法，通过使用 li + li 选择器来防止分隔符出现在第一个元素之前——这意味着任何 li 在另一个 li 之后。

小开

如果没有迫切需要为分隔符使用图像，您可以使用纯 CSS 来完成这项工作。

nav li + li:before{
content: " | ";
padding: 0 10px;
}

这在每个列表项之间放置了一个条形，就像原始问题中描述的图像一样。但是因为我们使用的是 相邻的选择器，所以它没有把杠放在第一个元素之前。因为我们使用的是 :before伪选择器，所以它不会把一个放在末尾。

小开

可以在要添加分隔符的位置添加一个 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;
}

这将提高您的执行速度，因为它不会加载任何图像

小开

对于那些使用 无礼的用户，我为此编写了一个 混音:

@mixin addSeparator($element, $separator, $padding) {
#{$element+'+'+$element}:before {
content: $separator;
padding: 0 $padding;
}
}

例如:

@include addSeparator('li', '|', 1em);

Which will give you this:

li+li:before {
content: "|";
padding: 0 1em;
}
小开

其他解决方案是可以的，但是如果使用 : 之后，就不需要在最后添加分隔符; 如果使用 校对: before，则不需要在最开始添加分隔符。

所以:

个案: 事后

.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;
}
小开

我相信最好的解决方案，是我使用的，这是一个自然的 css 边框:

border-right:1px solid;

你可能需要注意填充物，比如:

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:last-child{
border-right:none;
}

祝你好运


提交答案