创建一个以图像为列表项的无序列表
米歇尔·阿什维尼（Michelle Ashwini）
我想创建一个以图像为“子弹点”的无序列表。
我有以下代码：
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;
}
糯米饭
很简单：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
第一个列表项之后带有项目符号的无序列表
- 2
第一个列表项之后的带项目符号的无序列表
- 3
如何定位覆盖列表项和无序列表中的最后一个锚点元素
- 4
如何在ul（无序列表）中查找下一个li（列表项）的ID
- 5
将无序列表中的图像与列表项对齐
- 6
排列无序列表项
- 7
如何使用JQuery将一个类插入其子子菜单之前的无序列表项目中？
- 8
在无序列表中选择一个特定的类
- 9
列表项的无序列表数
- 10
无序列表-列表项位置
- 11
替换无序列表中的列表项
- 12
在将元素动态添加到另一个UL的无序列表中的同时添加图像
- 13
HtmlHelper创建最多2个列表元素的无序列表
- 14
css masonry 无序列表项
- 15
如何使用JQuery将一个类插入到其子子菜单之前的无序列表项目中？
- 16
在 for 循环中的另一个列表项之后创建一个列表名称
- 17
为创建一个对象列表
- 18
使用JQuery将列表元素从一个无序列表移动到另一个
- 19
在无序列表的第n个元素中选择一个div
- 20
jQuery仅显示多个无序列表中的5个列表项
- 21
如何为无序列表中的每个元素添加一个复选框？
- 22
如何选择无序列表中的第一个 <li>？
- 23
如何将列表项放在无序列表的中央？
- 24
使用PHP计算无序列表中列表项的总数
- 25
如何获取列表项以填充父级无序列表
- 26
jQuery将列表项移动到无序列表的末尾
- 27
将列表项添加到无序列表
- 28
计算多个无序列表中的列表项（ul）
- 29
如何获取列表项以填充父级无序列表
我来说两句