HTML list with different images as bullets

后端未结

关注

 5  1099

北恋 2021-01-19 07:06

I know it is possible to set an image instead of the HTML default bullets:

list-style-image: url(...);

But I havent\'t found a way how I ca

5条回答

南笙 (楼主)

2021-01-19 07:21
you have to/can use classes in your list items:
```
  Foo
  
  Bar
  
```
CSS for images as bullets for

ul {
  list-style: none;
}
li {
 padding-left: 25px; /*adjust to your needs*/
}
li.bar {
  background: url(img_2.png) no-repeat 0 50%;
}
li.foo {
  background: url(img_1.png) no-repeat 0 50%;
}

CSS for images as bullets for

ul {
  list-style: none;
}
li a {
 padding-left: 25px; /*adjust to your needs*/
 display: block;
}
li.bar a {
  background: url(img_2.png) no-repeat 0 50%;
}
li.foo a {
  background: url(img_1.png) no-repeat 0 50%;
}

0 讨论(0)

查看其它5个回答