Question

我不太确定应对这种情况的最佳方法。这是一个假设的情况：

<a href="/my-page/">
    <div style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;">
        <div style="line-height: 50px; position: absolute; bottom: 0; left: 0;">
            <span>My Clickable Box</span>
        </div>
    </div>
</a>

所以在这种情况下，我有一个容器，另一个容器位于底部，用于实际文本...但我需要整个框可以点击。

众所周知，当你告诉它是一个特定的高度或宽度时，锚标签效果不好......所以你几乎完全依赖内部内容来做这件事。

我不知道，我对此感到有点失落。

Answer 1

如果您将其显示更改为block或inline-block，则可以调整其大小，不需要使用我确定无效的div。

<a style="display:inline-block;width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;" href="/my-page/">
    <span>My Clickable Box</span>
</a>

Answer 2

您可以将需要可点击的div放在锚标记内，并在div上设置大小。然后整个div将被点击，因为它存在于链接中。

Answer 3

您可以像使用div一样设置锚点样式，然后整个区域可以点击。 E.g。

<a href="/my-page/" style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative; line-height: 50px; position: absolute; bottom: 0; left: 0;">My Clickable Box

当容器需要是可点击的链接时

3 个答案: