2012-04-21 77 views
1

我正在嘗試使用跨度在表格內顯示一些文本旁邊的小圖標。這裏的html代碼:跨度的CSS錯誤

<tr> 
    <td> 
    <span class="icon">&nbsp;</span> 
    Bob Smith 
    </td> 
</tr> 

CSS代碼:

.icon 
{ 
    cursor: pointer; 
    background-position: left top; 
    background-repeat: no-repeat; 
    display: block; 
    float:left; 
    padding-left: 15px; 
    background-image: url(../images/icon.png); 
} 

我要的是一個小的複選框圖標(15x15px)旁邊的名字顯示,格式如下:

[icon]Bob Smith 

然而,現在它的表現爲:

[icon]   Bob Smith 

(也就是圖標和文字之間有很多空白)

任何想法如何解決這個問題?

+0

是這個hapenning只能在IE? ,我在這裏測試它http://jsfiddle.net/CpUUg/和它的工作正常 – 2012-04-21 01:40:41

+0

你確定表格單元格上沒有'text-align:center;'style? – steveax 2012-04-21 01:48:41

+0

你可以讓你的問題jsFiddle,或者給我們一個實時鏈接?我們基本上只是從許多可能出錯的事情中猜測出來的。 – DACrosby 2012-04-21 02:20:18

回答

0

嘗試在icon類明確地設置width,比如這個:

.icon 
{ 
    cursor: pointer; 
    background-position: left top; 
    background-repeat: no-repeat; 
    float:left; 
    width: 15px; 
    height: 15px; 
    background-image: url(../images/icon.png); 
} 
0

的Html

<tr> 
    <td> 
     <span class="icon"></span> Bob Smith 
    </td> 
</tr> 

CSS代碼:

.icon { 
    cursor: pointer; 
    background: url(../images/icon.png) 0 0 no-repeat; 
    display: block; 
    float:left; 
    width: 15px; 
    height:15px; 
    margin-right:4px;/*to put a slight buffer between icon and text*/ 
} 
+0

你如何看待?你還有什麼其他風格的網頁?沒有理由,只要路徑正確,圖標就會消失。 – Lazerblade 2012-04-21 01:45:48

+0

沒關係,圖標回來了,但其方式與之前相同,不接近文本 – 2012-04-21 01:56:42

+0

刪除邊距 - 右側,我添加了間距,但如果您希望直接在文本旁邊顯示圖標,則不需要。您還可以在表格或td中添加align =「left」。 – Lazerblade 2012-04-21 01:57:34