跨度的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错误

回答

相关问题