css控製文字前的小圖標

有些列表項目需要在文字前面加個小圖標，如下圖：

 

實作方法有多種，這裡使用元素。

 

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來共同實現這個小圖示的出現，就是讓文字靠右點