html - CSS Cover 链接文字与图片

Question

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

我想将 CSS 应用于 .sort-asc，以将文本“Sort Asc”替换为自定义 16x16 排序字形图像 (/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; }

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

Answer 1

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

移除了 float - 你不需要它，它在正确的位置。文本缩进对 inline 没有任何作用，试试 inline-block: http://jsbin.com/abeme

另一个 hack 是添加 color: transparent 和一个小尺寸，但这太 hacky 了。