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