停止鏈接在空間上有下劃線？

有沒有什麼辦法可以在html和css中停止帶有下劃線的鏈接，哪裏有空格？假設我想要一個帶有空格的小圖標，然後文字都是鏈接，但它們之間沒有任何關聯，這有可能嗎？停止鏈接在空間上有下劃線？

我不想要有卡住旁邊的文字:(

2013-03-02 NaughtySquid

添加保證金圖像 - DEMO

img { 
    margin-right: 15px 
}

來源

2013-03-02 11:57:10

不錯，從來沒有想到這一點！ – span 2013-03-02 11:57:57

傳說！正是我想要的那種東西：D – NaughtySquid 2013-03-02 11:58:50

非常好的主意。另一個證明我們在處理「簡單」問題時學到了很多東西。 +1 – mavrosxristoforos 2013-03-02 12:03:06

您可以添加圖標和文本作爲兩個獨立的鏈接指向同一個位置。

來源

2013-03-02 11:54:30 SteveP

嗯，這真的是唯一的方法？ CSS無法在鏈接上設置樣式空間？ – NaughtySquid 2013-03-02 11:56:08

你的圖標。可以有兩個單獨的鏈接（一個用於圖標，一個用於鏈接），也可以設置text-decoration: none;既

來源

2013-03-02 11:54:57 mavrosxristoforos

它已在下面回答。 – 2013-03-02 11:55:18

你可以這樣說：http://jsfiddle.net/mH6vG/

HTML：

<a><i class="icon-file"></i> <span>My link text</span></a>

CSS：

a > span { 
    text-decoration: underline; 
}

來源

2013-03-02 11:58:10

Zoltan Toth的解決方案是非常好的，簡單。 +1。但是讓我把我的0.02美元也投入。如果你不希望有你的鏈接圖標額外的圖像標籤，你也可以使用這個：

HTML

<a href="">Some lorem ipsum text</a>

CSS

a { 
    vertical-align: top; 
} 

a:before { 
    content: ''; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    margin: 0 10px 0 0; 
    background: transparent url(http://lorempixel.com/20/20) no-repeat 0 0; 
}

演示

http://jsfiddle.net/xQAzy/

來源

2013-03-02 12:40:14 insertusernamehere

停止鏈接在空間上有下劃線？

回答

相關問題