如何将“a href”链接添加到“div”？答案

【问题标题】：How To Add An "a href" Link To A "div"?如何将“a href”链接添加到“div”？
【发布时间】：2025-12-09 19:50:01
【问题描述】：

我需要知道如何向 div 添加一个 href 链接？您是否将 a href 标记放在整个“buttonOne”div 周围？还是应该在“linkedinB”div 周围或内部？

这是我的 HTML：

<div id="buttonOne">
  <div id="linkedinB">
    <img src="img/linkedinB.png" width="40" height="40">
  </div>
</div>

【问题讨论】：

几分钟前这篇文章有一些 CSS，我创建了一个 jsfiddle.net/n3ckB 。享受吧！
曾经有一段时间，标签是超文本上的锚。因此，div 周围没有锚，因为它们不是真正的内容，而是内容包装器。小男孩跳过了你的互联网时代...... :)

标签： html href add

【解决方案1】：

您的解决方案似乎对我不起作用，我有以下代码。如何将链接放入最后两个 div。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
  font-family: "Quicksand", sans-serif; 
  font-weight: bold; 
  text-align: center;  
  text-transform: uppercase; 
  -webkit-transition: all 0.25s ease; 
  -moz-transition: all 0.25s ease; 
  -ms-transition: all 0.25s ease; 
  -o-transition: all 0.025s ease; 
}

/* Colors */

#ora {
  background-color: #e67e22; 
}

#red {
  background-color: #e74c3c; 
}

#orab {
  background-color: white; 
  border: 5px solid #e67e22; 
}

#redb {
  background-color: white; 
  border: 5px solid #e74c3c; 
}
/* End of Colors */

.B {
  width: 240px; 
  height: 55px; 
  margin: auto; 
  line-height: 45px; 
  display: inline-block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  -o-box-sizing: border-box; 
} 

#orab:hover {
  background-color: #e67e22; 
}

#redb:hover {
  background-color: #e74c3c; 
}
#whib:hover {
  background-color: #ecf0f1; 
}

/* End of Border

.invert:hover {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -ms-filter: invert(1);
  -o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2> 

<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>

</html>

【讨论】：

【解决方案2】：

尝试创建一个名为 overlay 的类并对其应用以下 css：

a.overlay { width: 100%; height:100%; position: absolute; }

确保它被放置在定位元素中。

现在只需将带有该类的 <a> 标记放在要链接的 div 内：

<div id="buttonOne">
  <a class="overlay" href="......."></a>
    <div id="linkedinB">
       <img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
    </div>
 </div>

PhilipK 的建议可能有效，但无法验证，因为您不能将块元素 (div) 放在内联元素 (a) 内。当您的网站未通过验证时，W3C Ninja 就会来找您！

另一个建议是尽量避免使用内联样式。

【讨论】：

【解决方案3】：

尝试用javascript实现这个：

<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
    function myhref(web){
      window.location.href = web;}
</script>

【讨论】：

【解决方案4】：

你不能用a标签包围它吗？

  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>

【讨论】：

在ie8中产生问题，那是因为语义不正确
downed：因为语义不正确。请参考：this答案
在 HTML5 中使用 <div>inside <a> 是正确的。查看上面@zhirzh 链接的更新页面。
此外，当<div> 被<a> 标签包围时，几乎不可能对其进行样式设置。

【解决方案5】：

我会说：

 <a href="#"id="buttonOne">
            <div id="linkedinB">
                <img src="img/linkedinB.png" width="40" height="40">
            </div>
      </div>

但是，它仍然是一个链接。如果您想将链接更改为按钮，则应将 #buttonone 重命名为 #buttonone a { your css here }。

【讨论】：

【解决方案6】：

在这种情况下，这并不重要，因为两个divs 之间没有内容。

任何一个都会让浏览器向下滚动到它。

a 元素看起来像：

<a href="mypageName.html#buttonOne">buttonOne</a>

或者：

<a href="mypageName.html#linkedinB">linkedinB</a>

【讨论】：