Question

以下是我想在HTML / CSS中完成的事情：

我有不同高度和宽度的图像，但它们都在180x235以下。所以我要做的是创建一个div border和vertical-align: middle。我已成功完成了这项工作，但现在我仍然坚持如何正确地将href链接到整个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链接。

Answer 1

UPDATE 06/10/2014：在HTML5中使用div内部的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内部，在父级包含的其他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将位于所有周围元素的顶部。最后跨度将是可点击的，因为它在'a'标签内。

Answer 4

你可以做两件事：

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

Answer 5

关于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

Answer 6

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

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>标记。绝对处理<a>标记样式中的定位。向onclick event添加a where JavaScript将捕获该事件，然后在JavaScript事件结束时返回false以防止href的默认操作和点击冒泡。这适用于启用或未启用JavaScript的情况，并且可以在Javascript侦听器中处理任何AJAX。

如果您正在使用jQuery，则可以将其用作收听者，并省略onclick标记中的a。

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

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

Answer 9

我很惊讶到目前为止没有人提出这个简单的技巧！ (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>

Answer 10

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

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

我希望它可以帮助... 预先感谢

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>

HTML / CSS中整个div的href链接

11 个答案: