當一個容器需要是一個可點擊的鏈接

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一樣設計錨點的位置，然後整個區域都可以點擊。例如。

<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