html - 创建一个以图像为列表项的无序列表

Question

我想创建一个以图像作为“要点”的无序列表。

我有以下代码:

html

<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>    

CSS

.a-checkpoint-list{
  list-style-image: url("images/Checkbox.svg");
  list-style-type: none;
  padding-left: 12px;
  font-size:16px;
  text-align:center;
  }

我希望它看起来像下面这样:

在页面的中心。我似乎无法用我当前的 css 代码让它看起来像这样。知道我哪里出错了，因为我在这方面还很陌生。

更新代码

CSS

.mc-checkpoint-list > ul{
list-style-image: url('../images/Checkbox.svg');
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
font-size:16px;
}

.a-checkpoint-list{
margin-left:40%;
}

图片

工作代码

CSS

.mc-checkpoint-list > ul li{
    background-image: url(../images/checkbox.svg);
    list-style-type:none;
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
    font-size:17px;
    margin-top:20px;

Answer 1

很简单:

ul {
    list-style-image: url('imagename.svg');
}

对你来说应该是这样的:

.a-checkpoint-list > ul {
    list-style-image: url('http://i.stack.imgur.com/LaaDU.png');
}

<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>