在CSS

Question

我之后的菜单看起来像这样：

| one | two | three | four|

使用CSS和边框可以通过以下方式实现类似的功能：

.myContainer > ul > li{
    border-right: 1px solid purple;
}

.myContainer > ul > li:first-child{
    border-left: 1px solid purple;
}

我获得了客户希望用作边框的垂直图像。大。没什么大不了的。直到我试图实现它：

.nav-main > ul > li{           
    background: url('/Images/vertLine.png')no-repeat right top;
}

.nav-main > ul > li:first-child{           
    background: url('/Images/vertLine.png')no-repeat left top;
}

这给我的输出是：

| one  two | three | four|

有关如何使用图像实现此目的的任何想法？

Answer 1

多个背景图片

.nav-main > ul > li{           
    background: url('/Images/vertLine.png')no-repeat right top;
}

.nav-main > ul > li:first-child{           
    background: 
      url('/Images/vertLine.png')no-repeat left top,
      url('/Images/vertLine.png')no-repeat right top;
}