首頁 > web前端 > css教學 > 主體

css控製文字前的小圖標

高洛峰
發布: 2016-11-24 11:22:35
原創
1970 人瀏覽過

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

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


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板