html - 将 html 链接的可点击区域扩展到包含其他内容的包装 li 元素的大小

Question

我基本上有这个 html 代码:

<ul class="unordered-list">
  <li class="list-item">
    <div class="list-item-block">
      <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a>
      <p class="list-item-link-description">Short description of the link above</p>
    </div>
  </li>
</ul>

有没有一种方法可以通过保持链接位置和链接下方的描述来将链接的可点击区域扩展到 li 元素的大小？

我尝试对链接和描述都使用绝对定位，但是如果链接文本有换行符，这会失败。正如您在这个 jsFiddle 中看到的:http://jsfiddle.net/xgcjngvs/3/

我很乐意在没有 javascript 的情况下找到这个问题的解决方案。

编辑:我应该提到链接标签应该只包含纯文本而不是任何其他 html 代码。

Answer 1

鉴于您的新要求，还有另一种方法可以在不更改现有 HTML 结构的情况下实现:

• 从.list-item-link和.list-item-link-description中移除absolute定位，位置: absolute; 将元素从文档流中取出，这两个需要知道它们各自占用了多少空间
• 使用 .list-item-link:after 添加一个伪元素到 .list-item-link，使这个 position: absolute; 并设置 height 和 width 以占据容器的尺寸。

.unordered-list {
    list-style: none;
    padding-left: 0;
}
.list-item {
    min-height: 50px;
    position: relative;
}
.list-item-link {
    width: 100%;
}
.list-item-link:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.list-item-link-description {
    margin: 0;
}

<ul class="unordered-list">
    <li class="list-item">
        <div class="list-item-block">
            <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a>
            <p class="list-item-link-description">Short description of the link above</p>
        </div>
    </li>
    <li class="list-item">
        <div class="list-item-block">
            <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</a>
            <p class="list-item-link-description">Short description of the link above</p>
        </div>
    </li>
</ul>

JS fiddle : http://jsfiddle.net/5s44c95q/