Rumah >hujung hadapan web >tutorial css > css控制文字前的小图标
有些列表项需要在文字前加个小图标,如下图:
实现方法有多种,这里使用45a2772a6b6107b401db3c9b82c049c2元素。
span标记是行元素,没有宽高,虽然可以通过display:block;来改变。但是就会造成换行。
贴代码:
[html] www.php.cn <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span> <span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>
这里使用了padding-left来共同实现这个小图标的出现,就是让文字靠右点