HTML/CSS 中整个 div 的 href 链接答案

【问题标题】：a href link for entire div in HTML/CSSHTML/CSS 中整个 div 的 href 链接
【发布时间】：2021-11-11 03:36:28
【问题描述】：

这是我试图在 HTML/CSS 中完成的工作：

我有不同高度和宽度的图片，但它们都低于 180x235。所以我想做的是用border和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 链接。

【问题讨论】：

标签： html css

【解决方案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。

【讨论】：

是的 - <a> 标签是内联的，<div> 标签是块状的。将块级标签放在内联标签内是无效的，这就是错误的根源。
您可以使用span 代替div 并使用css 的display: block; 使其看起来符合期望和语义。
您应该只在<a> 标签上设置display:block。它将成为一个没有嵌套的块元素。
HTML5 允许将<div> 标签嵌套在<a> 标签内。
我不认为语义与它有任何关系。它现在有效且技术上正确，但与语义无关。

【解决方案2】：

为什么不去掉 <div> 元素并用 <a> 替换它呢？仅仅因为锚标记不是 div 并不意味着您不能使用 display:block、高度、宽度、背景、边框等设置它的样式。您可以将其 看起来 div 但仍然像链接一样act。这样您就不会依赖可能无法为某些用户启用的无效代码或 JavaScript。

【讨论】：

有趣。你能举个例子，我可以试试。谢谢
很好，但如果您在 <div> 中有另一个 <a>，则效果不佳。
很好的解决方案 - 这适用于需要锚标签以避免手动处理触摸的移动 Safari

【解决方案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;
}

span 标签将填充其父块，即 parentdiv，因为高度和宽度设置为 100%。由于将 z-index 设置为高于其他元素，因此 Span 将位于所有周围元素的顶部。最后 span 将是可点击的，因为它位于“a”标签内。

【讨论】：

aaamazing，搜索了几天后，这是对我有用的解决方案
我发现这个比接受的答案有用； “a block”中的所有文本都带有下划线。是的，您可以通过 text-decoration 去掉下划线，但该属性不会被继承。使用你的方法，@denu，让它变得简单。
是的，这是 Bootstrap 使用其拉伸链接的解决方案：getbootstrap.com/docs/4.5/utilities/stretched-link
@denu 在我提出自己的版本后，我看到了您的解决方案。很高兴得到你的想法！ stackoverflow.com/a/67156294/1134080

【解决方案4】：

脱离超现实梦想所说的，根据我的经验，最好设置锚标签的样式，但这确实取决于你在做什么。这是一个例子：

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

【讨论】：

【解决方案5】：

你可以做两件事：

将#childdivimage 更改为span 元素，并将#parentdivimage 更改为锚标记。这可能需要您添加更多样式以使事物看起来完美。 这是首选，因为它使用语义标记，并且不依赖于 javascript。
使用 Javascript 将点击事件绑定到#parentdivimage。您必须通过在此事件中修改 window.location 来重定向浏览器窗口。这是 TheEasyWay^TM，但不会优雅降级。

【讨论】：

【解决方案6】：

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

【讨论】：

是的，但这对我不起作用，因为我不希望图像成为 href。我希望整个块到一个href链接..将childdivimage转换为一个跨度并将其包装在一个a中并不能完成我想要的

【解决方案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>

【讨论】：

【解决方案8】：

这可以通过多种方式完成。一个。使用嵌套在标签内。

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

b.使用内联 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";
 });

【讨论】：

选项 "a" 是不正确的，因为它不允许使用块元素 (div, table, p, ...) 作为内联元素 (a, span, b,你，我，...）。浏览器呈现它，但它不是 html-conform。

【解决方案9】：

我要做的是在<a> 标记内放置一个跨度，将跨度设置为阻塞，并为跨度添加大小，或者只是将样式应用于<a> 标记。一定要处理<a>标签样式中的定位。将onclick event 添加到a where JavaScript 将捕获该事件，然后在 JavaScript 事件结束时返回 false 以防止 href 的默认操作和单击冒泡。这适用于启用或不启用 JavaScript 的情况，并且任何 AJAX 都可以在 Javascript 侦听器中处理。

如果您使用 jQuery，您可以将其用作您的侦听器并省略 a 标记中的 onclick。

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

这允许您根据需要将侦听器附加到任何更改的元素。

【讨论】：

【解决方案10】：

我很惊讶到目前为止没有人提出这个简单的技巧！ (denu does something similar though.)

如果您希望链接覆盖整个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> 创建块部分或幻灯片并且您希望整个幻灯片成为一个链接（而不是简单的幻灯片上的文本）时，这特别有用。在<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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案12】：

我只是这样做

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

【讨论】：

@ChrisClaude 我没有看到任何其他与此完全相同的答案。