1

スパンを使用して、テーブル内のテキストの横に小さなアイコンを表示しようとしています。これが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

（つまり、アイコンとテキストの間に多くの空白があります）

これを修正する方法はありますか？

4

2 に答える 2

0

次のように、明示的にクラスにawidthを設定してみてください。icon

.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-21T01:33:29.913 に答える
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*/
}
于 2012-04-21T01:37:14.083 に答える