我需要在导航元素之间添加分隔符。分隔符是图像。
我的HTML结构如下:ol> li> a> img。
在这里,我得出两个可能的解决方案
该怎么办?
只需使用分隔符图像作为li
上的背景图像。
要使其仅出现在列表项之间,请将图像放在li
的左侧,而不是放在第一个图像的左侧。
例如:
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
此CSS将图像添加到跟随另一个列表项的每个列表项 - 换句话说,所有这些列表项除了第一个列表项之外。
NB。请注意,相邻的选择器(li + li)在IE6中不起作用,因此您只需将背景图像添加到常规li(使用条件样式表),并可能对其中一个边应用负边距。
如果没有迫切需要将图像用于分隔符,则可以使用纯CSS执行此操作。
nav li + li:before{
content: " | ";
padding: 0 10px;
}
这会在每个列表项之间添加一个条,就像所描述的原始问题中的图像一样。但是因为我们正在使用adjacent selectors,所以它并没有把它放在第一个元素之前。因为我们正在使用: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;
}
将分隔符添加到li
背景中,并确保链接不会展开以覆盖分隔符,这意味着分隔符将无法单击。
您可以在要添加分隔符的位置添加一个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;
}
这将提高您的执行速度,因为它不会加载任何图像。试试吧.. :)
将其作为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精灵中,这样可以节省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选择器来保持分隔符出现在第一个元素之前 - 这意味着任何一个接着另一个李。
我认为最好的解决方案是我使用的,这是一个自然的CSS边界:
border-right:1px solid;
您可能需要像以下一样处理填充:
padding-left: 5px;
padding-right: 5px;
最后,如果你不想让最后一个li有这个独立的边框,那么在“border-right”中给它的最后一个孩子“none”,如下所示:
li:last-child{
border-right:none;
}
祝好运 :)