Question

我使用无序列表作为垂直导航栏，并尝试将图像作为每个元素之间的分隔线，以及列表上方和下方的图像。

我正在使用以下css

ul>li{
    display:block; 
    list-style-type: none;
}

ul>li:before{
    content:url(http://s21.postimg.org/eonynopdv/divider.jpg);
}

ul>li:last-child:after{
    content:url(http://s21.postimg.org/eonynopdv/divider.jpg);
}

要在每个元素之间放置一个2px高的图像，尽管它与列表项一致。是否可以设置这些图像的样式，使它们正确显示在上方和下方？

Example JSFiddle

Answer 1

我总是喜欢使用：after和：之前创建一些额外的效果

 ul>li:before{
    position: absolute;
    width: 100%;
    height: 1px;
    background: green;
    content:'';
    left: 0;
 }

这样的事情 JSFIDDLE

Answer 2

在这里检查这个css：

ul>li{
    border-top:10px solid;
    list-style-type: none;
    border-image:url(http://s21.postimg.org/eonynopdv/divider.jpg) 30 30;
}
ul>li:first-child{
    border-top:0 none;
}

http://jsfiddle.net/0b5vau42/1/

Answer 3

尝试使用css3 border image属性。

border-image:url(image.png) 30 30 round;

您只能在所需的边上应用边框。

在无序列表项之间划分线图像

3 个答案: