导航分隔符

Question

我需要在导航元素之间添加分隔符，分隔符以图像形式呈现。

我的HTML结构如下：ol > li > a > img。

这里有两种可能的解决方案：

1. 为分隔（糟糕！）添加更多的li标签，
2. 在每个元素的图片中包含分隔符（这种方法更好，但是有可能用户会点击“主页”，然后进入“服务”，因为它们彼此紧挨着，用户有可能意外地点击属于“服务”的分隔符）；

应该怎么办？

- daGrevis

Answer 1

如果没有紧急需要使用图像作为分隔符，您可以使用纯CSS来实现这一点。

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

这会在每个列表项之间放置一条竖线，就像原问题中的图片所描述的那样。但是，由于我们使用了相邻选择器，它不会在第一个元素之前放置竖线。而且，由于我们使用了:before伪类选择器，它也不会在末尾添加竖线。

- jrue

---

哇！这正是我需要的页脚菜单。当然还需要一些额外的CSS。 - Vladimir

从技术上讲，您仍然可以使用图像，但对其进行base64编码并将图像嵌入式存储。https://css-tricks.com/data-uris/ - commadelimited

@jrue，垂直更改分隔符的位置也是可能的吗？它没有响应顶部填充/边距。 - Floris

Answer 2

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

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

例如：

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

这个CSS会为每个跟在另一个列表项后面的列表项添加图像 - 换句话说，除了第一个列表项外所有列表项都会添加图像。

注意，相邻选择器（li + li）在IE6中不起作用，所以您需要将背景图像添加到传统的li元素（使用条件样式表），并可能对其中一条边应用负边距。

- ajcw

---

使用 :before 伪选择器可以防止其出现在最后一个元素之后。 - jrue

好的解决方案 - 像魔法一样运作。IE6支持？谁在乎！ :) 如果我们都停止支持旧版浏览器，或许可以迫使人们停止使用它们。 - Jordan

使用 border-left 画出项之间的垂直线，非常流畅。 - Richard-Degenne

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

- T04435

Answer 4

为了使分隔符与菜单文本垂直居中，请按照以下步骤操作：

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

- user7149870

---

优秀的解决方案。 - Jodyshop

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

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

- Rajiv Pingale

---

你能解释一下怎么做吗？但总有其他方法... CSS3：我们可以获取第N个元素并添加分隔符。 - Rajiv Pingale

糟糕，我陷入了一些麻烦。我刚刚花了30分钟在标准文件、RWD手册甚至尝试了不同的屏幕阅读器来证明我的观点。然而，至少屏幕阅读器足够聪明，不会大声朗读空弹头（当使用@ol@而不是@ul@时也不会枚举缺失选项）。因此，我可以指出这里使用@li@与使用表格实现列布局属于同一类别。 - Volker Stolz

Answer 6

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

- d4nyll

---

为什么某些情况下不会显示 '|'？有任何原因吗？ - James111

不用担心，我已经想出如何做了。我还需要在:last-child后面添加一个 :after，以使不需要分隔符的子元素的内容= content: ""。 - James111

Answer 7

将分隔符添加到

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

- Soufiane Hassou

Answer 8

我认为最好的解决方案是使用我自己使用的自然CSS边框：

border-right:1px solid;

你可能需要考虑填充（padding）的问题，例如：

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

最后，如果您不想让最后一个li有分隔边框，请在"border-right"中给它的last-child属性设置为"none"，如下所示：

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

祝你好运 :)

- Avi

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

接下来，我建议使用不同的标记以实现可访问性：
不要将图像嵌入行内，而是将文本作为文本插入，用span包围每个文本，将图像应用为背景，并使用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;}

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

- Faust

---

是的，我刚查了一下，你说得对。我的答案已经被编辑过了，因为你引导了我，所以我会给你+1的赞。 - Faust

谢谢。+1 是我忘记添加的填充。 - ajcw