导航分隔符

| 我需要在导航元素之间添加分隔符。分隔符是图像。我的HTML结构如下：ol> li> a> img。在这里，我提出两种可能的解决方案：要添加更多li标签进行分隔（嘘！），在每个元素的图像中都包含分隔符（这是更好的选择，但是可能会使用户单击“ Home”，但转到“ Services”，因为它们彼此落后，并且用户可能会不小心单击属于\“服务\”的分隔符）；该怎么办？

已邀请:

9 个回复

先对冈蒲

只需将the图像用作li上的背景图像。要使其仅出现在列表项之间，请将图像放置在“ 0”的左侧，而不要放置在第一个图像上。例如：

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

此CSS会将图像添加到另一个列表项之后的每个列表项-换句话说，除了第一个列表项之外的所有列表项。注意请注意，相邻的选择器（li + li）在IE6中不起作用，因此您仅需将背景图像添加到常规li（带有条件样式表）中，并可能对其中一个边缘应用负边距。

铰齐插

如果没有迫切需要使用图像作为分隔符，则可以使用纯CSS来实现。

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

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

可扇胆

其他解决方案也可以，但是如果使用：after则不需要在最后添加分隔符，如果使用：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;
    }

才改隘瘁

将分隔符添加到“ 0”背景，并确保链接不会扩展为覆盖分隔符，这意味着该分隔符将不可单击。

奥李

您可以在要添加分隔线的位置添加一个“ 0”元素

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

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

傻零凰死授

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

盛梯獭八搽

将其作为背景放置在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 */

接下来，我建议使用其他标记来实现可访问性：与其以嵌入式方式嵌入图像，不如以文本形式放入文本，将每个文本都用跨距包围，将图像作为背景应用，然后使用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之后。

妒垮

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

border-right:1px solid;

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

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

最后，如果您不希望最后一个li具有该单独的边框，请在“ border-right \”中为其最后一个子项“ none \”命名，如下所示：

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

祝好运：）

要回复问题请先登录或注册

导航分隔符

9 个回复

发起人

css

navigation

usability

separator

问题状态

导航分隔符

与内容相关的链接

9 个回复

发起人

css

navigation

usability

separator

问题状态