2016-02-25 245 views
1

我有一個<a>標籤,裏面既有文字也有圖像。我想,如下圖所示的圖像和文字加以強調:添加下劃線到<img>標籤<a>標籤

enter image description here

我一直得到是這樣的,但:

enter image description here

正如你可以看到下劃線下不延長箭頭。這裏是我的代碼:

<a target="_blank" href="http://url.com" style="text-decoration:underline;color:#000001;" >Call To Action <img src="image/path/triangle.png" border="0" /></a> 

現在我不能把一個底部邊框包裝容器,因爲在移動我需要強調的文字,這隻會把邊界上的文字的底部。

+0

將整個東西包裝在一個div中,並在其上放置一個底部邊框。只是不要做任何別的風格明智的,它不會干涉別的。 – durbnpoisn

+1

看起來你錯過了一個關閉'a'標籤。 – Yass

+0

@Yass謝謝我解決了它。 – DigitalMC

回答

1

您需要的款式aborder-bottom並取出text-decoration:underline

<a target="_blank" href="http://url.com" style="border-bottom:1px solid red;text-decoration:none;color:#000001;">Call To Action <img src="//lorempixel.com/20/20" border="0" /></a>

+0

迄今爲止工作得很好!讓我做一些渲染測試並確認。 – DigitalMC

0

一個

<span style="text-decoration:underline"> 

標籤中附上兩個標籤。

+0

試過,沒有爲我工作,它適合你嗎?雖然謝謝! – DigitalMC

0

超鏈接標記沒有結束標記</a>,如果你想關閉它,使它象這樣:

<a target="_blank" href="http://url.com" style="text-decoration: underline; color: #000001;"> 
    Call To Action <img src="image/path/triangle.png" border="0" /> 
</a> 

參考:

另外,我建議你從內容區分開的設計。

+0

是的,這只是一個錯字,我的壞話。謝謝。 – DigitalMC