css控制文字前的小圖標(biāo)具體寫法
發(fā)布時間：2013-03-20 16:23:36 作者：佚名 
我要評論
我要評論文字前的小圖標(biāo)在一些列表展示中特別的有用，本文會介紹一些實現(xiàn)的此效果的具體方法，感興趣的你可不要錯過了哈，希望本教程對你有所幫助
有些列表項需要在文字前加個小圖標(biāo)，如下圖：
實現(xiàn)方法有多種，這里使用<span>元素。
span標(biāo)記是行元素，沒有寬高，雖然可以通過display:block;來改變。但是就會造成換行。
貼代碼：
<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來實現(xiàn)這個小圖標(biāo)的出現(xiàn)，就是讓文字靠右點
實現(xiàn)方法有多種，這里使用<span>元素。
span標(biāo)記是行元素，沒有寬高，雖然可以通過display:block;來改變。但是就會造成換行。
貼代碼：
復(fù)制代碼
代碼如下:<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來實現(xiàn)這個小圖標(biāo)的出現(xiàn)，就是讓文字靠右點
相關(guān)文章
- 下面小編就為大家?guī)硪黄猚ss圖標(biāo)與文字對齊的兩種實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給的大家做個參考。一起跟隨小編過來看看吧2016-06-12
Html+css實現(xiàn)純文字和帶圖標(biāo)的按鈕
這篇文章主要介紹了Html+css實現(xiàn)純文字和帶圖標(biāo)按鈕的方法，按鈕有很多種外觀，本文介紹了純文字和帶圖標(biāo)兩種按鈕，感興趣的小伙伴們可以參考一下2016-02-24
純CSS實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標(biāo)功能
這篇文章主要介紹了純CSS實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標(biāo)功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參2020-05-11
