HTML/CSS中用于整个div的超链接a href链接

Question

以下是我在HTML/CSS中想要实现的内容：

我有不同高度和宽度的图片，但它们都小于180x235。因此，我想创建一个带有边框且 vertical-align: middle 的 div ，并将所有图片放在其中。我已成功完成了这一步骤，但现在我遇到了如何正确地为整个 div 创建超链接的问题。

这是我的代码：

<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链接。

- Adil

Answer 1

更新于2014年06月10日: 在HTML5中，将div放在a标签内在语义上是正确的。

您需要在以下情况之间进行选择：

<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 标签。

- Ben

---

没错 - <a> 标签是行内元素， <div> 标签是块级元素。把块级标签放在行内标签里是无效的，因此导致了错误。 - Surreal Dreams

你可以使用 span 代替 div，并使用 CSS 的 display: block; 来使其看起来符合要求且语义化。 - ajsharma

你只需要在<a>标签上设置display:block，它就会变成一个块级元素而不需要嵌套。 - Augie Gardner

HTML5允许将<div>标签嵌套在<a>标签内部。 - JacobF

我认为语义学与此无关。这个现在是有效和技术上正确的，但与语义无关。 - Rob

Answer 2

为什么不将

元素删除并替换为元素呢？即使锚标签不是div，也可以使用display:block、height、width、background、border等样式进行设置。您可以使其看起来像一个div但仍然像一个链接一样工作。这样，您就不会依赖于无效的代码或某些用户可能没有启用的JavaScript。

- Surreal Dreams

---

有趣。你能否给我一个例子，这样我就可以试一下。谢谢。 - Adil

好的，但在<div>内有另一个<a>标签的情况下不会很好地工作。 - Muhd

很棒的解决方案 - 这对于需要避免手动处理触摸的移动Safari中使用锚标签非常有效。 - Alamgir Mand

Answer 3

就像这样做：

父级 div 的图像应该具有指定的宽度和高度，其位置应该为：

position: relative;

只需要在父divimage内部，放在该父元素包含的其他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;
}

标签将填满其父级块元素parentdiv，因为高度和宽度都设置为100％。由于将z-index设置得比其他元素更高，所以标签位于所有周围元素的顶部。最后，标签是可点击的，因为它在'a'标签内部。

- denu

---

在搜索了几天之后，这个解决方案终于让我 aaamazing 了！ - somid3

我发现这种方法比被接受的答案更有用；在“a block”内的所有文本都会被下划线。是的，你可以通过text-decoration属性去掉下划线，但该属性不会被继承。使用你的方法，@denu，使得这变得简单。 - yapdog

是的，这就是Bootstrap在其stretched-link中使用的解决方案：https://getbootstrap.com/docs/4.5/utilities/stretched-link/。 - djibe

@denu 在我自己想出解决方案之后，我看到了你的解决方案。很高兴听听你的想法！https://dev59.com/Wm855IYBdhLWcg3wNxkM#67156294 - ADTC

Answer 4

根据Surreal Dreams所说，根据我的经验，最好样式化锚标签，但这确实取决于你要做什么。这是一个例子：

Html：

<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

- Kyle Crabtree

Answer 5

你可以做两件事情：

1. 将 #childdivimage 改为 span 元素，并将 #parentdivimage 改为锚点标签。这可能需要你添加更多的样式来完善外观。这是首选方法，因为它使用语义化标记，并不依赖于Javascript。

2. 使用Javascript将点击事件绑定到 #parentdivimage 上。在此事件中通过修改 window.location 来重定向浏览器窗口。这是 TheEasyWay^TM，但不会优雅地降级。

- Stephen

Answer 6

我很惊讶迄今为止没有人提出这个简单的技巧！(虽然Denu做了类似的事情。) 如果您想要一个链接覆盖整个

，一个想法是创建一个空的标签作为第一个子元素：

<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>创建块状部分或幻灯片时非常有效，如果您希望整个幻灯片成为链接（而不仅仅是幻灯片上的文本）。对于<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>

- ADTC

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>

- albert

Answer 8

这可以用多种方法实现。 a. 在标签内使用嵌套的 标签。最初的回答。

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

b. Using the Inline JavaScript Method

<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";
 });

- Ayush Anand

---

选项“a”在语义上不正确，因为不允许将块元素（div、table、p等）用作内联元素（a、span、b、u、i等）的子元素。浏览器可以呈现它，但它不符合HTML规范。 - Sven

Answer 9

将id="childdivimag"的div改为span，并将其包裹在a元素中。由于span和img默认为内联元素，因此这仍然有效，而div是块级元素，因此在a中包含它时无效。

- David Thomas

---

是的，但这对我不起作用，因为我不想让图像成为href。我希望整个块都是href链接...将childdivimage转换为span并将其包装在a中无法实现我的目标。 - Adil

Answer 10

我只是做

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

- Isaac Muniz

---

@ChrisClaude 我没有看到其他答案完全像这个。 - Isaac Muniz