导航分隔符答案

【问题标题】：Separators for Navigation导航分隔符
【发布时间】：2011-08-07 00:34:02
【问题描述】：

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

我的 HTML 结构是这样的：ol > li > a > img。

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

要添加更多li 分隔标签（嘘！），
在每个元素的图像中包含分隔符（这更好，但它可能会导致用户点击，例如“主页”，但会进入“服务”，因为它们是一个在另一个之后，用户可能会不小心点击在属于“服务”的分隔符上）；

怎么办？

【问题讨论】：

艺术再现+1。

标签： css navigation usability separator

【解决方案1】：

如果没有迫切需要使用图像作为分隔符，您可以使用纯 CSS 来做到这一点。

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

这会在每个列表项之间放置一个栏，就像原始问题中描述的图像一样。但是由于我们使用的是adjacent selectors，所以它不会将条放在第一个元素之前。由于我们使用的是:before 伪选择器，所以它不会在最后放置一个。

【讨论】：

哇！这正是我的页脚菜单所需要的。当然还有一些额外的 CSS。
从技术上讲，您仍然可以使用图像，但 base64 对其进行编码并内联存储图像。 css-tricks.com/data-uris
@jrue 是否也可以垂直更改分隔符的位置？它没有响应顶部填充/边距。

【解决方案2】：

只需使用分隔符图像作为li 上的背景图像。

要让它只出现在列表项之间，请将图像放在li 的左侧，但不要放在第一个。

例如：

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

此 CSS 将图像添加到跟在另一个列表项之后的每个列表项 - 换句话说，除了第一个之外的所有列表项。

注意。请注意 相邻选择器 (li + li) 在 IE6 中不起作用，因此您只需将背景图像添加到常规 li （使用条件样式表）并可能应用负边距到边缘之一。

【讨论】：

使用:before 伪选择器可以防止它出现在最后一个元素之后。
不错的解决方案-像魅力一样工作-IE6支持？谁在乎！ :) 如果我们都停止支持旧版浏览器，也许我们会迫使人们停止使用它们。
就像一个带有border-left 的chram 在项目之间画一条垂直线。

【解决方案3】：

其他方案都可以，但是如果使用:after，则不需要在最后添加分隔符，如果使用:before，则不需要在开头添加分隔符。

所以：

案例：之后

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

案例：之前

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

【讨论】：

【解决方案4】：

要使分隔符相对于菜单文本垂直居中，

.menustyle li + li:before {
  content: ' | ';
  padding: 0;
  position: relative;
  top: -2px;
}

【讨论】：

优秀的解决方案。

【解决方案5】：

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

这将提高您的执行速度，因为它不会加载任何图像。只是测试一下.. :)

【讨论】：

你能解释一下吗？但总有其他方法...... CSS3：我们可以添加获取第N个元素并添加Divider。
Drat，我把自己弄得一团糟。我只花了 30 分钟在标准文档、RWD 小册子上四处寻找，甚至尝试了不同的屏幕阅读器来证明我的观点。然而，至少屏幕阅读器足够聪明，不会大声朗读空项目符号（也不会在使用@ol@ 而不是@ul@ 时列举缺失的选项）。所以我只能指出，这里使用@li@与使用表格实现列布局属于同一类。

【解决方案6】：

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

【讨论】：

【解决方案7】：

对于那些使用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;
}

【讨论】：

这没有显示“|”因为某些原因？有什么理由不呢？
别担心，我知道该怎么做。我还必须在最后一个孩子之后添加一个 :after 以制作不需要分隔符 = 内容的孩子的内容：“”

【解决方案8】：

我相信最好的解决方案是我使用的，那就是自然的 css 边框：

border-right:1px solid;

您可能需要像这样处理填充：

padding-left: 5px;
padding-right: 5px;

最后，如果您不希望最后一个 li 有分隔边框，请在“border-right”中给它最后一个子元素“none”，如下所示：

li:last-child{
  border-right:none;
}

祝你好运:)

【讨论】：

【解决方案9】：

把它作为背景放在列表元素上：

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

接下来，我建议使用不同的可访问性标记：
与其将图像嵌入内联，不如将文本作为文本放入，用 span 围绕每个图像，将图像应用为背景，然后使用 display:none 隐藏文本——这提供了更多的样式灵活性，并允许您对 1px 宽的 bg 图像使用平铺，节省带宽，您可以将其嵌入到 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(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

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

【讨论】：

是的——我刚刚查了一下，你是对的。我的答案已编辑，自从你领导以来，我给你 +1。
谢谢。 +1 用于我忘记添加的填充。