Question

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

Separators between elements.

我的HTML结构如下： ol＆gt; li＆gt; a＆gt; img 。

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

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

怎么办？

Answer 1

如果没有迫切需要将图像用于分隔符，则可以使用纯CSS执行此操作。

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

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

Answer 2

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

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

例如：

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

这个CSS将图像添加到跟随另一个列表项的每个列表项 - 换句话说，它们都是第一个列表项。

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

Answer 3

另一个解决方案没问题，但是如果使用：after ，或者在开头使用：before 之前，则无需在最后添加分隔符。< / p>

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背景，并确保链接不会展开以覆盖分隔符，这意味着分隔符将无法单击。

Answer 6

您可以在要添加分隔符

的位置添加一个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 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

将其作为列表元素的背景：

<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隐藏文本 - 这样可以提供更多样式灵活性，并允许您使用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;}

<强>更新好吧，我看到其他人在我之前得到了类似的答案 - 我注意到约翰还包括一种方法，可以通过使用li + li选择器来保持分隔符出现在第一个元素之前 - 这意味着任何li都会在另一个li之后出现。

Answer 9

我认为最好的解决方案是我使用的，这是一个自然的CSS边界：

border-right:1px solid;

您可能需要像以下一样处理填充：

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

最后，如果你不希望最后一个li有这个独立的边界，那么在“border-right”中给它的最后一个孩子“none”，如下所示：

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

祝你好运：）

导航分隔符

9 个答案: