Question

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

我想将CSS应用于.sort-asc，用自定义的16x16排序字形图像（/images/asc.png）替换文本“Sort Asc”，将图像直接放在文本的右侧。有可能吗？

注意：我无法更改标记。我只能申请风格;以下是我的微弱尝试：

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

删除浮动 - 你不需要它，它位于正确的位置。文字缩进对inline不起作用，请尝试inline-block：http://jsbin.com/abeme

另一个黑客是添加color: transparent，而且规模较小，但这太糟糕了。

Answer 2

如果删除显示块，您将无法设置宽度，高度或使用文本缩进来隐藏A中的副本。尝试更改显示：阻止显示：内联（因为您正在浮动））相反 - 它可能会给你你需要的东西。

Answer 3

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

CSS封面链接文本与图像

3 个答案: