跨度的CSS錯誤

我正在嘗試使用跨度在表格內顯示一些文本旁邊的小圖標。這裏的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

（也就是圖標和文字之間有很多空白）

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

來源

2012-04-21 Click Upvote

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

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

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

嘗試在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); 
}

來源

2012-04-21 01:33:29 msigman

的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*/ 
}

來源

2012-04-21 01:37:14 Lazerblade

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

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

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

跨度的CSS錯誤

回答

相關問題