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覆蓋鏈接文本

回答

相關問題