CSS - 分行鏈接框

我正在嘗試創建一個帶有鏈接文本和分行的框。CSS - 分行鏈接框

但是，由於某些原因，當線路斷線，盒子是打破太..

我嘗試了很多的選擇，但我不能找到解決方案。

<br><br> 
<a href="#" style="padding: 10px; border: 1pt solid #ea1d2a;">Line 1 <br> Line 2</a> 

<br><br><br><br> 
<a href="#" style="padding: 10px; border: 1pt solid #ea1d2a;"><span style="display:block">Line 1</span> <br><span style="display:block"> Line 2</span></a>

來源

2016-08-17 DANIEL

嘗試添加display:block您a標籤。

默認情況下錨直列元素，不塊元素 - 這是什麼原因造成您的框拆分爲兩行。

下面應該工作：

<a href="#" style="display: block; padding: 10px; border: 1pt solid #ea1d2a;">Line 1 <br> Line 2</a>

來源

2016-08-17 04:12:49

使用'顯示：直列block'可能接近預期的結果。這可以避免填充整個寬度的鏈接。 –

hi @ adrian-lynch和brandon-gano，首先爲您的時間！這兩個解決方案的作品但是如果你需要一個小盒子，在我的情況下只有10px的填充，布蘭登的解決方案是一個更好的解決方案。很多！ – DANIEL

CSS - 分行鏈接框

回答

相關問題