我正在尝试创建一个带有链接文本和分隔线的框。
但是，由于某种原因，当线被打断时，盒子也被打断了..
我尝试了很多选项，但找不到解决方案。
这里是 https://jsfiddle.net/cbdnvm2t/
<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>
最佳答案
尝试添加 display:block给你的a标签。
默认情况下， anchor 是内联元素，而不是 block 元素 - 这就是导致您的框分成两行的原因。
以下应该有效:
<a href="#" style="display: block; padding: 10px; border: 1pt solid #ea1d2a;">Line 1 <br> Line 2</a>
关于html - CSS - 断线链接框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38987945/