CSS覆盖链接文本

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

我想申请的CSS的.sort-ASC与自定义排序16×16字形图像（/images/asc.png）取代文本“排序ASC”，直接把图像在文本的右侧。可能吗？CSS覆盖链接文本

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

 
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; 
}

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

来源

2009-11-20 Travis Heseman

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，并具有体积小，但同样哈克。

来源

2009-11-20 20:44:27 Kobi

删除浮动并显示：使文本出现在“我的标题”文本旁边。

来源

2009-11-20 20:40:00

刚刚做了，现在图像显示在“Sort Asc”后面。我不希望“Sort Asc”出现。 – 2009-11-20 20:41:56

尝试将文本的颜色设置为与背景相同的颜色 - 这有点丑陋，但... color：#FFFFFF;背景色：#FFFFFF; – 2009-11-20 20:47:09

如果删除显示块，将无法设置宽度，高度或使用文本缩进来隐藏A内的副本。尝试更改display：block以显示：inline（因为您是浮动），而不是 - 它可能会给你你所需要的。

来源

2009-11-20 20:43:27 oliverdore

更改了“display：block;”以“显示：内联”; - 不用找了。 – 2009-11-20 20:45:53

'Display'对浮动元素afaik没有影响。 – Kobi 2009-11-20 20:50:10

嗯，公平地说，它确实 - 它修复了IE6中浮动元素上的双浮动错误边距。 – oliverdore 2009-11-20 20:53:35

CSS覆盖链接文本

回答

相关问题