代码之家 › 专栏 › 技术社区 › Travis Heseman

带图像的CSS封面链接文本

anchor image css html

Travis Heseman · 技术社区 · 16 年前

<th>
  My Heading
  <a href="#" class="sort-asc" title="sort">Sort Asc</a>
</th>

我要将css应用于.sort asc以将文本“sort asc”替换为自定义16x16排序glyph图像(/images/asc.png),将图像直接放置在文本右侧。有可能吗?

注意:我无法更改标记。我只能应用样式;以下是我的薄弱尝试:

a.sort-asc {
    float: left;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 5px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url("/images/asc.png") no-repeat; 
}

当前,图像一直显示在表格标题单元格的左侧。我需要它在文本“我的标题”的右边。

3 回复 | 直到 16 年前

Kobi 16 年前

a.sort-asc {
    width: 16px;
    height: 16px;
    padding: 0;
    display:inline-block;
    text-indent: 200px;
    overflow: hidden;
    background: url("/favicon.ico") no-repeat; 
}

移除浮球-你不需要它,它在正确的位置。文本缩进与 inline 尝试 inline-block 以下内容: http://jsbin.com/abeme

另一个黑客是添加 color: transparent 而且体积小,但是太粗糙了。