如何使多行链接之间的空间可点击

Question

我想链接一个 3 行长的句子。这看起来很简单，但我无法找到一种优雅的方法来使行之间的空间也可点击。这是我的代码：

<style>
    a {
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
        text-decoration: none;
        font-size: 20px;
        line-height:40px;
    }
</style>

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

小提琴： http: //jsfiddle.net/zbxyjdvb/

Answer 1

您不能将 div（块）放在 span（内联）元素内。 将 div 放入锚点内是否正确？

将 Anchor 转换为display: inline-block，然后使用额外的跨度来恢复文本中的下划线。

html:

<a href="#"><span class="underline">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
    sed do eiusmod tempor</span></a>

CSS：

a {
    color: #000;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    display: inline-block;
}
.underline {
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

演示： http: //jsfiddle.net/zbxyjdvb/9/