列表樣式圖像問題

Question

我的子彈列表使用圖像而不是班級分配的常規子彈出現問題。 圖像不放置在列表旁邊，而是放置在單詞集中。

我這部分的HTML如下所示：

  li { background: url('http://s30.postimg.org/52wxo16t9/bullet_Image.png') 2px 4px no-repeat; display: list-item; padding: 3px 3px 3px 20px; overflow: visible; list-style: none; } 

 <ol> <li class="planet">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li class="planet">Aliquam tincidunt mauris eu risus.</li> </ol> 

Answer 1

您可以通過在ol標記處使用list-style-image屬性輕松地做到這一點。

ol {
    list-style-image: url('your_image_url');
}

例

Answer 2

更改為：

li{
        background:url('http://s30.postimg.org/52wxo16t9/bullet_Image.png') no-repeat;
        background-size: 10px 10px;
        display: list-item;
         background-position:0px 7px;
        padding: 3px 3px 3px 20px;
        overflow: visible;
        list-style: none;
    }