CSS - 浮動左和錨元素

我有一個錨點元素，它使用css類基本上用圖像替換文本。我知道這聽起來很奇怪。但是，最終的結果看起來是正確的（大部分）。CSS - 浮動左和錨元素

.toolLink a { 
    overflow:hidden;  
} 
.toolEdit 
{ 
    float:left; 
    background:url(/resources/images/edit.png) no-repeat; 
    width: 15px; 
    height: 15px; 
}

我的錨元素看起來是這樣的：

<a href="#" class="toolEdit">edit</a>

當「浮動：左」聲明包含，一切看起來是正確的。但是，當我刪除「float：left」語句時，會出現單詞「編輯」並縮小圖像。我需要刪除float：left，因爲我需要將內容居中放在表格的列中。但只要float：left在那裏，內容就會對齊左邊。我該怎麼辦？

來源

2009-12-01 user70192

這應該工作...

你的CSS

.toolEdit 
{ 
    display:block; 
    background:url(/resources/images/edit.png) no-repeat; 
    width: 15px; 
    height: 15px; 
    text-decoration:none; 
} 

.toolEdit span 
{ 
    visibility:hidden; 
}

您可以刪除溢出：太...沒有必要隱藏風格...

你HTML

<a href="#" class="toolEdit"><span>edit</span></a>

來源

2009-12-01 20:59:36 luckykind

錨是內聯元素。嘗試添加顯示：塊到您的.toolEdit類。

您可能也會考慮使用div而不是錨點，因爲錨點不會去任何地方，也不會有名稱或任何其他錨點目的。

編輯：

無論哪種方式，「編輯」應該顯示，除非你使用一些JavaScript將其刪除。在這種情況下，我建議使用圖片替換「編輯」文本，而不是使用背景圖片。

來源

2009-12-01 20:18:58 BrewinBombers

......或「

您是否僅使用錨點元素來實現點擊功能？我同意上面的評論，語義上你想要的是一個按鈕。 – Jack 2009-12-01 20:27:30

CSS - 浮動左和錨元素

回答

相關問題