可点击<li> with background-image：</li>

Question

我在<li>内部有一些我希望建立链接的图像。只有图像的下半部分是可点击的。我尝试了不同的结构并研究了jquery解决方案，但希望保持纯粹的CSS。

<div class="link">
  <ul>
    <li>
      <a href="url">
        <img src="image">
      </a>
    </li>
  </ul>
</div>

.link {
    white-space: nowrap;
    text-align:center;
}
.link li {
    max-width: 23.3%; 
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.link img {
    max-width:100%;
}

Answer 1

将display:inline-block添加到a链接，并使用height:100%和width:100%围绕图片进行环绕。

Answer 2

我发现了一个更深层次的问题。我的标题重叠了那个区域。