我需要在导航元素之间添加分隔符。分隔符是图像。
我的HTML结构如下:ol > li > a > img
。
在这里,我提出两种可能的解决方案:
li
标记以进行分隔(boo!),该怎么办?
最佳答案
只需将分隔符图像用作li
上的背景图像即可。
要使其仅出现在列表项之间,请将图像放置在li
的左侧,而不要放置在第一个图像的左侧。
例如:
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
该CSS会将图像添加到另一个列表项之后的每个列表项-换句话说,除了第一个列表项之外的所有列表项。
注意请注意,相邻的选择器(li + li)在IE6中不起作用,因此您仅需将背景图像添加到常规li(带有条件样式表)中,并可能对其中一个边缘应用负边距。