css - 跨度的 CSS 错误

Question

我正在尝试使用跨度在表格内的某些文本旁边显示一个小图标。这是html代码：

<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

（即图标和文本之间有很多空白）

任何想法如何解决这一问题？

Answer 1

尝试width在icon类上显式设置 a ，例如：

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

Answer 2

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