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

我的HTML结构如下:ol > li > a > img
在这里,我提出两种可能的解决方案:

  • 要添加更多li标记以进行分隔(boo!),
  • 在每个元素的图像中包含分隔符(这是更好的方法,但是它可能使用户可以单击,例如“Home”,但转到“Services”,因为它们彼此落后,并且用户可能会不小心单击分隔符属于“服务”);

  • 该怎么办?

    最佳答案

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

    要使其仅出现在列表项之间,请将图像放置在li的左侧,而不要放置在第一个图像的左侧。

    例如:

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

    该CSS会将图像添加到另一个列表项之后的每个列表项-换句话说,除了第一个列表项之外的所有列表项。

    注意请注意,相邻的选择器(li + li)在IE6中不起作用,因此您仅需将背景图像添加到常规li(带有条件样式表)中,并可能对其中一个边缘应用负边距。

    10-05 21:01
    查看更多