Question

我想创建一个无序列表，其中包含一个图像作为＆＃39;项目符号点。

我有以下代码：

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%;
}

IMG

工作代码

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>

Answer 2

试试这个：

<html>
<head>

<style>
.a-checkpoint-list{width:200px;margin:0 auto}

.a-checkpoint-list ul{
  list-style-image: url("download.jpg");
  list-style-type: none;
  padding-left: 12px;
  font-size:16px;

  }
</style>
 </head>
 <body>
<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div> 
</body>
</html>

Answer 3

.a-checkpoint-list ul {
  list-style-image:url("images/Checkbox.svg");
  list-style-type:none;
  margin:0px auto;
  font-size:16px;
  width: 200px;
  vertical-align:middle;
}

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

这可以帮到你

Answer 4

您需要按如下方式更改css

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

Answer 5

检查以下代码可能会对您有所帮助。

＆＃13;

div.a-checkpoint-list ul {
  list-style-image: url("http://findicons.com/files/icons/1156/fugue/16/tick_circle_frame.png");
  list-style-type: none;
  margin: 0 auto;
  width: 100px;
}

＆＃13;

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

＆＃13;

创建一个无序列表，其中包含图像作为列表项

5 个答案: