导航分隔符

Question

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

我的 HTML 结构如下： ol >力> a＞ img.

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

1. 要添加更多 li 标签进行分隔（嘘！），
2. 在每个元素的图像中包含分隔符（这更好，但它使用户可能点击，例如，“主页”，但进入“服务”，因为它们一个接一个，用户可能会意外单击属于“服务”的分隔符）；

该怎么办？

Answer 1

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

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

这会在每个列表项之间放置一个栏，就像原始问题中所描述的图像一样。但由于我们使用的是相邻选择器，所以它不会将横线放在前面第一个元素。由于我们使用的是 :before 伪选择器，因此它不会在末尾添加一个。

Answer 2

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

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

例如：

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

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

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

Answer 3

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

SO：

案例：之后

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

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

案例：之前

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

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

Answer 4

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

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

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

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

Answer 6

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

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

Answer 8

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

border-right:1px solid;

您可能需要注意填充，例如：

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

最后，如果您不希望最后一个 li 有那个分离的边框，请给它“border-right”中的最后一个孩子“none”如下所示：

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

祝你好运:)

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

接下来，我建议使用不同的标记以实现可访问性：
不要内嵌图像，而是将文本作为文本放入，用跨度包围每个图像，将图像应用为背景，然后使用 display:none 隐藏文本 - 这提供了更多的样式灵活性，并允许您使用 1 像素宽的背景图像平铺，可以节省带宽，并且您可以将其嵌入到 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;}

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