这是一个古老的问题，但我想我应该回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……

锚标记是这样工作的-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否成立。如果这就是口头解决方案背后的原因，那么我道歉……

实际上你现在需要包括JavaScript代码， 请查看本教程。

但有一个棘手的方法来实现这个使用CSS代码 你必须在你的div标签内嵌套一个锚标签，你必须应用这个属性，

display:block;

当你这样做了，它将使整个宽度区域可点击(但在锚标签的高度内)，如果你想覆盖整个div区域，你必须将锚标签的高度设置为div标签的高度，例如:

height:60px;

这将使整个区域可点击，然后你可以应用text-indent:-9999px到锚标签来实现目标。

这是非常棘手和简单的，它只是用CSS代码创建的。

这里有一个例子:http://jsfiddle.net/hbirjand/RG8wW/

这是实现你想要的东西的“有效”解决方案。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能的是，您真正想要的是将<a>标记显示为块级元素。

我不建议使用JavaScript来模拟超链接，因为这违背了标记验证的目的，标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。

最好是发布一个不需要验证，但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外，使用onclick不会为屏幕阅读器提供语义信息，以确定div是作为链接使用的。

我来这里是希望能找到比我更好的解决办法，但这里提供的办法我一个都不喜欢。我想你们有些人误解了这个问题。OP希望使一个充满内容的div表现得像一个链接。其中一个例子是facebook的广告——如果你仔细观察，你会发现它们实际上是适当的标记。

对我来说，不应该的是:javascript(不应该只是一个链接，非常糟糕的SEO/可访问性);无效的HTML。

本质上是这样的:

Build your panel using normal CSS techniques and valid HTML. Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too). Inside that link, put an empty span tag (<span></span>, not <span /> - thanks @Campey) give the panel position:relative apply the following CSS to the empty span: { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('empty.gif'); } It will now cover the panel, and as it's inside an <A> tag, it's a clickable link give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

<a href="…" style="cursor: pointer;"><div> … </div></a>

这招对我很管用:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

这将添加一个不可见的元素(span)，它覆盖了整个div，并且在z-index上位于整个div的上方，因此当有人点击该div时，点击基本上会被链接的不可见的“span”层拦截。

注意:如果你已经对其他元素使用了z索引，只要确保这个z索引的值高于你想让它“放在”上面的任何值。