HTML/CSS 中整個 div 的 href 鏈接

Question

這是我試圖在 HTML/CSS 中完成的任務：

我有不同高度和寬度的圖像，但它們都在 180x235 以下。 所以我想要做的是創建一個帶有border和vertical-align: middle的div vertical-align: middle它們vertical-align: middle 。 我已經成功地做到了，但現在我被困在如何正確地鏈接整個div的 href 上。

這是我的代碼：

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

請注意，為了方便復制粘貼這里，樣式代碼是內聯的。

我在某處讀到，我可以簡單地在代碼頂部添加另一個父 div，然后在其中執行 href。 但是，根據一些研究，它不會是有效的代碼。

所以再次總結一下，我需要整個 div ( #parentdivimage ) 作為一個 href 鏈接。

Answer 1

2014 年 6 月 10 日更新：在 HTML5 中使用 a 中的 div 在語義上是正確的。

您需要在以下場景中進行選擇：

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

這在語義上是不正確的，但它會起作用。

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

這在語義上是正確的，但它涉及使用 JS。

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

這在語義上是正確的並且按預期工作，但不再是 div。

Answer 2

為什么不去掉<div>元素並用<a>替換它呢？ 正因為定位標記不是一個div並不意味着你不能與風格它display:block ，高度，寬度，背景，邊框等，您可以使它看起來像一個div，但仍然像一個鏈接. 這樣您就不會依賴於某些用戶可能未啟用的無效代碼或 JavaScript。

Answer 3

這樣做：

Parentdivimage 應該有指定的寬度和高度，它的位置應該是：

position: relative;

就在 parentdivimage 內，在 parent 包含的其他 div 旁邊，您應該放置：

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

然后在css文件中：

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

由於高度和寬度設置為 100%，span 標簽將填充其父塊，即 parentdiv。 由於將 z-index 設置為高於其他元素，因此 Span 將位於所有周圍元素的頂部。 最后 span 將是可點擊的，因為它位於“a”標簽內。

Answer 4

脫離超現實主義夢想所說的，根據我的經驗，最好設置錨標簽的樣式，但這確實取決於你在做什么。 下面是一個例子：

網址：

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

然后是 CSS：

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Answer 5

你可以做兩件事：

1. 將#childdivimage更改為span元素，並將#parentdivimage更改為錨標記。 這可能需要您添加更多樣式以使事情看起來完美。 這是首選，因為它使用語義標記，並且不依賴於 javascript。

2. 使用 Javascript 將點擊事件綁定到#parentdivimage 。 您必須通過修改此事件內的window.location來重定向瀏覽器窗口。 這是 TheEasyWay ^TM ，但不會優雅地降級。

Answer 6

使div的id="childdivimag"一個span ，在一個，而是和包裝a元素。 由於默認情況下span和img是內聯元素，這仍然有效，而div是塊級元素，因此包含在a時標記無效。

Answer 7

將display:block放在錨元素上。 和/或zoom:1 ；

但你真的應該這樣做。

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Answer 8

這可以通過多種方式完成。 a. 使用嵌套在標簽內。

<a href="link1.html">
   <div> Something in the div </div>
 </a>

灣使用內聯 JavaScript 方法

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

C. 在標簽內使用 jQuery

HTML：

<div class="demo" > Some text here </div>

jQuery：

$(".demo").click( function() {
  window.location.href="link1.html";
 });

Answer 9

我要做的是在<a>標簽內放置一個跨度，將跨度設置為阻止，並為跨度添加大小，或者只是將樣式應用於<a>標簽。 絕對處理<a>標簽樣式中的定位。 a where JavaScript 將捕獲該事件a where添加一個onclick event ，然后在 JavaScript 事件結束時返回 false 以防止href默認操作和點擊的冒泡。 這適用於啟用或不啟用 JavaScript 的情況，並且任何 AJAX 都可以在 Javascript 偵聽器中處理。

如果您使用的是 jQuery，則可以將其用作偵聽器並省略a標記中的onclick 。

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

這允許您根據需要將偵聽器附加到任何更改的元素。

Answer 10

我很驚訝到目前為止沒有人提出這個簡單的技巧！ （不過，denu 做了類似的事情。）

如果你想要一個鏈接來覆蓋整個div ，一個想法是創建一個空的<a>標簽作為第一個孩子：

<div class="covered-div">
  <a class="cover-link" href="/my-link"></a>
  <!-- other content as usual -->
</div>

div.covered-div {
  position: relative;
}

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

當使用<ul>創建塊部分或幻燈片並且您希望整個幻燈片是一個鏈接（而不是簡單的幻燈片上的文本）時，這尤其<ul> 。 在<li>的情況下，用<a>包裹它是無效的，因此您必須將封面鏈接放在項目內並使用 CSS 將其擴展到整個<li>塊。

請注意，將它作為第一個孩子意味着它將使文本中的其他鏈接或按鈕無法通過點擊訪問。 如果您希望它們可點擊，那么您必須將其設為最后一個子項。

在原始問題的情況下：

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
  <a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
  <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
    <img src="myimage.jpg" height="62" width="180">
  </div>
  <!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>

Answer 11

帶有<div>標簽的鏈接：

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

帶有<a>標簽的鏈接：

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>

Answer 12

我只是做

onClick="location.href='url or path here'"