blocks|key|2973274|text|将分隔符添加到li背景中，并确保链接不会扩展到覆盖分隔符，这意味着无法单击分隔符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2973275|entityMap^0|7|2|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Add the separator to the <code>li</code> background and make sure the link doesn't expand to cover the separator, which means the separator won't be click-able.

blocks|key|2973312|text|只需将分隔符图像用作li上的背景图像。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2973313|要使其仅出现在列表项之间，请将图像定位到li的左侧，而不是第一个。|2973314|例如：|2973315|#nav+li+%2B+li+{
++++background:url('seperator.gif')+no-repeat+top+left;
++++padding-left:+10px
}|code-block|syntax|javascript|2973316|这个CSS将图像添加到另一个列表项后面的每个列表项-换句话说，除了第一个列表项之外的所有列表项。|2973317|注意：请注意，相邻的选择器(li+%2B+li)在IE6中不起作用，因此您只需将背景图像添加到传统的li+(使用条件样式表)，并可能对其中一个边缘应用负边距。|2973318|entityMap^0|A|2|0|K|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

Simply use the separator image as a background image on the <code>li</code>.

To get it to only appear in between list items, position the image to the left of the <code>li</code>, but not on the first one.

For example:

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

This CSS adds the image to every list item that follows another list item - in other words all of them but the first.

NB. Be aware the adjacent selector (li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.

blocks|key|273610|text|将其作为列表元素的背景：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273611|<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+*/|code-block|syntax|javascript|273612|接下来，我建议使用不同的标记来实现可访问性：|273613|不是嵌入图像，而是将文本作为文本放入，用跨度将每个图像括起来，将图像作为背景应用，然后使用display:none隐藏文本--这提供了更多的样式灵活性，并允许您对1px宽的bg图像使用平铺，节省带宽，并且可以将其嵌入到CSS+sprite中，从而节省HTTP调用：|273614|HTML：|273615|<ul+id="nav">
++++<li><a>link+text</a></li>
++++...
++++<li><a>link+text</a></li>
</ul|273616|CSS：|273617|#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;}|273618|好的，我看到其他人在我之前也得到了类似的答案--我注意到还包括了一种方法，通过使用li+%2B+li选择器来防止分隔符出现在第一个元素之前-这意味着任何li都在另一个li之后。|offset|length|style|BOLD|273619|entityMap^0|0|0|0|0|0|0|0|0|S|1M|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|18|8|@$U|19|V|1A|W|X]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

Put it in as a background on the list element:

<pre><code>&lt;ul id="nav"&gt;
 &lt;li&gt;&lt;a&gt;&lt;img /&gt;&lt;/a&gt;&lt;/li&gt;
 ...
 &lt;li&gt;&lt;a&gt;&lt;img /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */
</code></pre>

Next, I recommend a different markup for accessibility: 
Rather than embedding the images inline, put text in as text, surround each with a span, apply the image as a background the the , and then hide the text with display:none -- this gives much more styling flexibilty, and allows you to use tiling with a 1px wide bg image, saves bandwidth, and you can embed it in a CSS sprite, which saves HTTP calls:

HTML:

<pre><code>&lt;ul id="nav"&gt;
 &lt;li&gt;&lt;a&gt;&lt;span&gt;link text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 ...
 &lt;li&gt;&lt;a&gt;&lt;span&gt;link text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul
</code></pre>

CSS:

<pre><code>#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;}
</code></pre>

UPDATE
OK, I see others got similar answer in before me -- and I note that John also includes a means for keeping the separator from appearing before the first element, by using the li + li selector -- which means any li coming after another li.

blocks|key|275582|text|如果不迫切需要使用图像作为分隔符，您可以使用纯CSS来实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|275583|nav+li+%2B+li:before{
++++content:+"+%7C+";
++++padding:+0+10px;
}|code-block|syntax|javascript|275584|这会在每个列表项之间放置一个条，就像原始问题中描述的图像一样。但由于我们使用的是adjacent+selectors，所以它不会将栏放在第一个元素之前。因为我们使用的是:before伪选择器，所以它不会把一个放在末尾。|offset|length|style|CODE|275585|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/selector.html#pattern-matching^0|0|0|2C|7|14|I|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

If there isn't a pressing need to use images for the separators, you could do this with pure CSS. 

<pre><code>nav li + li:before{
 content: " | ";
 padding: 0 10px;
}
</code></pre>

This puts a bar between each list item, just as the image in the original question described. But since we're using the <a href="http://www.w3.org/TR/CSS2/selector.html#pattern-matching">adjacent selectors</a>, it doesn't put the bar before the first element. And since we're using the <code>:before</code> pseudo selector, it doesn't put one at the end.

blocks|key|3187268|text|您可以在要添加分隔符的位置添加一个li元素|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3187269|<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>|code-block|syntax|javascript|3187270|在CSS中，您可以添加以下代码。|3187271|.divider-vertical-second-menu{
+++height:+40px;
+++width:+1px;
+++margin:+0+5px;
+++overflow:+hidden;
+++background-color:+#DDD;
+++border-right:+2px+solid+#FFF;
}|3187272|这将提高您的执行速度，因为它不会加载任何图像。只要测试一下就行了。:)|3187273|entityMap^0|H|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

You can add one <code>li</code> element where you want to add divider 

<pre><code>&lt;ul&gt;
 &lt;li&gt; your content &lt;/li&gt;
 &lt;li class="divider-vertical-second-menu"&gt;&lt;/li&gt;
 &lt;li&gt; NExt content &lt;/li&gt;
 &lt;li class="divider-vertical-second-menu"&gt;&lt;/li&gt;
 &lt;li&gt; last item &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

In CSS you can Add following code.

<pre><code>.divider-vertical-second-menu{
 height: 40px;
 width: 1px;
 margin: 0 5px;
 overflow: hidden;
 background-color: #DDD;
 border-right: 2px solid #FFF;
}
</code></pre>

This will increase you speed of execution as it will not load any image. just test it out.. :)

blocks|key|2973507|text|对于那些使用Sass的人，我为此编写了一个mixin：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2973508|@mixin+addSeparator($element,+$separator,+$padding)+{
++++#{$element%2B'%2B'%2B$element}:before+{
++++++++content:+$separator;
++++++++padding:+0+$padding;
++++}
}|code-block|syntax|javascript|2973509|示例：|2973510|@include+addSeparator('li',+'%7C',+1em);|2973511|这将为您提供以下内容：|2973512|li%2Bli:before+{
++content:+"%7C";
++padding:+0+1em;
}|2973513|entityMap|0|LINK|mutability|MUTABLE|url|http://sass-lang.com/|1|https://gist.github.com/d4nyll/b798e0c21e8ec9af94e3^0|6|4|0|L|5|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

For those using <a href="http://sass-lang.com/" rel="nofollow">Sass</a>, I have written a <a href="https://gist.github.com/d4nyll/b798e0c21e8ec9af94e3" rel="nofollow">mixin</a> for this purpose:

<pre><code>@mixin addSeparator($element, $separator, $padding) {
 #{$element+'+'+$element}:before {
 content: $separator;
 padding: 0 $padding;
 }
}
</code></pre>

Example:

<pre><code>@include addSeparator('li', '|', 1em);
</code></pre>

Which will give you this:

<pre><code>li+li:before {
 content: "|";
 padding: 0 1em;
}
</code></pre>

blocks|key|272163|text|其他解决方案都可以，但如果使用:after，则不需要在最后添加分隔符；如果使用:+need，则不需要在最开始添加分隔符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272164|所以：|272165|案例:之后|272166|.link:after+{
++content:+'%7C';
++padding:+0+1rem;
}

.link:last-child:after+{
++content:+'';
}|code-block|syntax|javascript|272167|案例:之前|272168|.link:before+{
++content:+'%7C';
++padding:+0+1rem;
}

.link:first-child:before+{
++content:+'';
}|272169|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The other solution are OK, but there is no need to add separator at the very last if using :after or at the very beginning if using :before.

SO:

case :after

<pre><code>.link:after {
 content: '|';
 padding: 0 1rem;
}

.link:last-child:after {
 content: '';
}
</code></pre>

case :before

<pre><code>.link:before {
 content: '|';
 padding: 0 1rem;
}

.link:first-child:before {
 content: '';
}
</code></pre>

blocks|key|272177|text|为了使分隔符相对于菜单文本垂直居中，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272178|.menustyle+li+%2B+li:before+{
++content:+'+%7C+';
++padding:+0;
++position:+relative;
++top:+-2px;
}|code-block|syntax|javascript|272179|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To get the separator vertically centered relative to the menu text,
<pre><code>.menustyle li + li:before {
 content: ' | ';
 padding: 0;
 position: relative;
 top: -2px;
}
</code></pre>

blocks|key|3187347|text|我相信最好的解决方案就是我所使用的，这是一个自然的css边框：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3187348|border-right:1px+solid;|code-block|syntax|javascript|3187349|您可能需要注意填充，如：|3187350|padding-left:+5px;
padding-right:+5px;|3187351|最后，如果你不想让最后一个li有分离的边界，在"+border+-right“中给出它的最后一个子元素"none”，如下所示：|3187352|li:last-child{
++border-right:none;
}|3187353|祝你好运:)|3187354|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I believe the best solution for this, is what I use, and that is a natural css border:

<pre><code>border-right:1px solid;
</code></pre>

You might need to take care of padding like:

<pre><code>padding-left: 5px;
padding-right: 5px;
</code></pre>

Finally, if you don't want the last li to have that seperating border, give it's last-child "none" in "border-right" like this:

<pre><code>li:last-child{
 border-right:none;
}
</code></pre>

Good luck :)

I need to add separators between elements of navigation. Separators are images.
<img src="https://i.stack.imgur.com/8tYXQ.jpg" alt="Separators between elements." />
My HTML structure is like: <code>ol &gt; li &gt; a &gt; img</code>.
Here I come to two possible solutions:
<ol>
<li>To add more <code>li</code> tags for separation (boo!),</li>
<li>Include separator in image of each element (this is better, but it makes possibility that user may click on, example, &quot;Home&quot;, but get to &quot;Services&quot;, because they are one behind the other and user may accidentally click on separator that belongs to &quot;Services&quot;);</li>
</ol>
What to do?

Separators for Navigation

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要在导航元素之间添加分隔符。分隔符是图像。​​我的超文本标记语言结构是：ol > li > a > img。在这里，我提出了两种可能的解决方案：添加更多用于分隔的li标记(嘘！)，在每个元素的图像中包含分隔符(这更好，但它使用户可以单击，例如，“主页”，但可以转到“服务”，因为它们一个接一个，用户可能会意外地单击属...

问用于导航的分隔符
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于导航的分隔符EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于导航的分隔符
EN