有些列表項目需要在文字前面加個小圖標,如下圖:
實作方法有多種,這裡使用元素。
span標記是行元素,沒有寬高,雖然可以透過display:block;來改變。但是就會造成換行。
貼程式碼:
[html] m.sbmmt.com <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來共同實現這個小圖示的出現,就是讓文字靠右點