HTML/CSS 中整个 div 的 href 链接

a href link for entire div in HTML/CSS

提问by Adil

Here is what I am trying to accomplish in HTML/CSS:

这是我试图在 HTML/CSS 中完成的任务：

I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a divwith borderand vertical-align: middlethem all. I have successfully done that but now I am stuck on how to properly a href link the entire div.

我有不同高度和宽度的图像，但它们都在 180x235 以下。所以我想要做的是创建一个divwithborder和vertical-align: middle他们所有人。我已经成功地做到了这一点，但现在我被困在如何正确地将整个div.

Here is my code:

这是我的代码：

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

Please note that for the sake of copy pasting here easily, the style code is inline.

请注意，为了方便复制粘贴这里，样式代码是内联的。

I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.

我在某处读到，我可以简单地在代码顶部添加另一个父 div，然后在其中执行 href。但是，根据一些研究，它不会是有效的代码。

So to sum it up again, I need the entire div (#parentdivimage) to be a href link.

所以再次总结一下，我需要整个 div ( #parentdivimage) 都是一个 href 链接。

回答by Ben

UPDATE 06/10/2014:using div's inside a's is semantically correct in HTML5.

2014 年 6 月 10 日更新：在 HTML5 中使用 a 中的 div 在语义上是正确的。

You'll need to choose between the following scenarios:

您需要在以下场景中进行选择：

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

which is semantically incorrect, but it will work.

这在语义上是不正确的，但它会起作用。

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

which is semantically correct but it involves using JS.

这在语义上是正确的，但它涉及使用 JS。

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

which is semantically correct and works as expected but is not a div any more.

这在语义上是正确的并且按预期工作，但不再是 div。

回答by Surreal Dreams

Why don't you strip out the <div>element and replace it with an <a>instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it looklike a div but still actlike a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.

为什么不去掉<div>元素并用一个<a>代替它呢？正因为定位标记不是一个div并不意味着你不能与它的风格display:block，高度，宽度，背景，边框，等等。你可以把它看起来像一个div，但仍然起到像一个链接。这样您就不会依赖于某些用户可能未启用的无效代码或 JavaScript。

回答by denu

Do it like this:

像这样做：

Parentdivimage should have specified width and height, and its position should be:

Parentdivimage 应该有指定的宽度和高度，它的位置应该是：

position: relative;

Just inside the parentdivimage, next to other divs that parent contains you should put:

就在 parentdivimage 内，在 parent 包含的其他 div 旁边，您应该放置：

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

Then in css file:

然后在css文件中：

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

The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.

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

回答by Kyle Crabtree

Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:

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

Html:

网址：

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

Then the CSS:

然后是 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

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

回答by Stephen

Two things you can do:

你可以做两件事：

1. Change #childdivimageto a spanelement, and change #parentdivimageto an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.

2. Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.locationinside this event. This is TheEasyWay^TM, but will not degrade gracefully.

1. 更改#childdivimage为span元素，并更改#parentdivimage为锚标记。这可能需要您添加更多样式以使事情看起来完美。 这是首选，因为它使用语义标记，并且不依赖于 javascript。

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

回答by David says reinstate Monica

Make the divof id="childdivimag"a spaninstead, and wrap that in an aelement. As the spanand imgare in-line elements by default this remains valid, whereas a divis a block level element, and therefore invalid mark-up when contained within an a.

做div的id="childdivimag"一个span替代，并包裹在一个a元素。由于span和img默认情况下是行内元素，这仍然有效，而 adiv是块级元素，因此当包含在a.

回答by albert

put display:blockon the anchor element. and/or zoom:1;

穿上display:block锚元素。和/或zoom:1；

but you should just really do this.

但你真的应该这样做。

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>

回答by DaveW

What I would do is put a span inside the <a>tag, set the span to block, and add size to the span, or just apply the styling to the <a>tag. Definitely handle the positioning in the <a>tag style. Add an onclick eventto the a whereJavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the hrefand bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.

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

If you're using jQuery, you can use this as your listener and omit the onclickin the atag.

如果你使用jQuery，您可以使用它作为你的听众，并省略onclick的a标签。

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

this allows you to attach listeners to any changed elements as necessary.

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

回答by Ayush Anand

This can be done in many ways. a. Using nested inside a tag.

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

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

b. Using the Inline JavaScript Method

湾 使用内联 JavaScript 方法

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

c. Using jQuery inside tag

C。在标签内使用 jQuery

HTML:

HTML：

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

jQuery:

jQuery：

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

回答by mahdi

A link with <div>tags:

带<div>标签的链接：

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

A link with <a>tags:

带<a>标签的链接：

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