为什么超链接在我的部分 div 上不起作用？答案

【问题标题】：How come the hyperlink doesn't work on part of my div?为什么超链接在我的部分 div 上不起作用？
【发布时间】：2010-12-17 09:06:53
【问题描述】：

http://geodit.com:8000/

如果您尝试在“Spear St. Oakland”和描述之间单击，您会注意到锚点无处可去。那是因为它们之间有一个填充。

当用户在文本之间单击时，如何使超链接起作用？

【问题讨论】：

标签： javascript templates browser css

【解决方案1】：

尝试将填充放在 a 元素上，而不是 div 元素上。

【讨论】：

【解决方案2】：

您的代码过于复杂。例如，您不需要将所有内容（例如每个链接）包装在 DIV 中（或相反）。只需直接设置链接的样式，可能将其 display 样式设置为 block，使其行为类似于 div。

如果您将两个链接合并为一个，那么您的问题就会消失，并且您不需要使用cursor: pointer“伪造”链接。

这是一个示例，您的 HTML 可以多么简单：

<div class="awallpost grid_doc_holder sub" data-image="http://s3.amazonaws.com/fabletest/7cgeq8hkdt"> 
  <a href="/d/1339" class="trans_caption "> 
    See the sun whispering the light of our days from last summer...
  </a> 

  <div class="trans_caption_over"> 
     <a href="#" data-holdclass="positive_hold" data-content_id="1339" data-score="1" class="upvote_button positive overlaybutton" name=""><img src="/media/img/brightmix/star.png"> Great Find!</a> 

     <a href="/d/1339" class="extras"> 
       <em><img src="/media/img/brightmix/placedot2_white.png" align="texttop" width="12" height="auto">  Spear St. Oakland, 94107</em> 
       <span>Hey it&#39;s weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset ...</span>
     </a> 
   </div> 

   <div class="title_text_only"> 
     See the sun whispering the light of our days from last summer...
   </div> 
   <div class="desc_text_only"> 
     Hey it&#39;s weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset was so gorgeous and soft just perfect for my &amp;amp;quot;cream ...
   </div> 
</div>

【讨论】：

【解决方案3】：

文本之间没有链接。你有两个链接。令人困惑的是

.grid_doc_holder {
    cursor: pointer;
    text-align: center;
}

当你没有通过链接时，它会显示手您可以考虑使外部容器可点击

【讨论】：

【解决方案4】：

我相信你只想把你的 div（或 Divs）放在一个 A 标记中，这样它就可以全部点击了。

【讨论】：

不允许像 div 这样的块元素出现在像链接这样的内联元素中。
Stefan 的回答并不正确，因为您使用的是 HTML5 文档类型，其中标记具有 transparent content model。
除非你使用 HTML5，否则你可以有块级链接，因此可以在链接中嵌套 div