我已经知道如何使用CSS background-image
属性添加图像项目符号。我现在要做的是在有序列表中的行号左侧显示一个小图形图标。
我一直遇到的问题是,当试图放置图像子弹时,它不会显示在屏幕上。我可以看到它是通过沿X轴向右轻推图像,所以我不知道它没有正确显示。
注意:我可以让图标显示在文本前面的数字右侧,但这不是理想的结果。
.action-item {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: -4px 2px;
background-repeat: no-repeat;
line-height: 1.5;
background-size: 1.4em;
list-style: none;
margin-left: 0;
padding-left: 0;
text-indent: 1.4em;
}
<ol>
<li class="action-item">item 1</li>
<li>item 2</li>
<li>item 3</li>
<li class="action-item">item 4</li>
<li class="action-item">item 5</li>
<li>item 6</li>
</ol>
我尝试过配置text-indent
,padding-left
,margin-left
,line-height
,但都无济于事。
overflow: hidden
z-index
这是否可以使用纯CSS,如果是这样,我做错了什么?
答案 0 :(得分:2)
您可以使用counters和之前的伪元素:
setResult(RESULT_OK);
finish();
&#13;
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: orderedlist;
}
ol > li {
counter-increment: orderedlist;
padding-left: 1.4em;
line-height: 1.5;
}
ol > li:before {
content: counter(orderedlist)".";
display: inline-block;
width: 1.52em;
}
.action-item {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: -4px 2px;
background-repeat: no-repeat;
background-size: 1.4em;
}
&#13;