CSS-通过将 div 放入 <a href=#> 使整个 div 可点击不起作用答案

【问题标题】：CSS- Make Entire Div Clickable by putting the div in <a href=#> is not workingCSS-通过将 div 放入 <a href=#> 使整个 div 可点击不起作用
【发布时间】：2015-03-11 08:13:46
【问题描述】：

我必须使包含其他元素的整个 div 可点击。我通过像这样在<a href="#"> </a> 中编写潜水来做到这一点：

<a href="#">
     <div class="detail padding-lg full-width like-on-post">
        <div class="avtar round  pull-left">
            <span class="user-personal-pic default-user-avtar border circle             avtar user-image you-menu ">
               <g:if test="${usrHeader?.avatarUrl?.indexOf('no-avatar')    ==-1 || usrHeader?.avatarUrl?.length() == 0 || usrHeader?.avatarUrl == null}">
              <img src="${usrHeader?.avatarUrl}" width="34" height="34" alt="Avatar" />
                 </g:if>

             </span>
            </div>
         <div class="detail-container">
                <p class="name">${usrHeader?.fullName()}</p>
               <p class="footer mouse-over"><g:link controller="connection" action="details">View profile</g:link></p>
                                </div>
                        </div>
                </a>

由于某种原因，而是将整个 div 放到 <a href="#"> </a> 中，而是将每个元素放到不同的 <a href="#"> </a> 中。

我如何才能将所有 div 全部转换为 <a href="#"> </a>？

【问题讨论】：

我认为<g:link> 会产生一个锚标记，所以你不能在锚内嵌套锚，因此它不适合你
除了外星先生所说的，div是块级元素，在a标签内无效。欲了解更多信息，请查看stackoverflow.com/questions/3379392/…。解决这个问题的一种方法可能是使用span 标签并在css中将它们更改为display: block;。

标签： html css

【解决方案1】：

默认情况下会显示<a> 标签inline，任何内联元素都不会真正受到padding 的影响，所以如果你想制作一个在其中任何地方都可点击的按钮，请制作一个空的div put <a> 并给它display:block; 或display:inline-block; 然后你可以添加填充来扩展它，或者使用宽度，取决于你需要做什么，这里是一个小的Example

<div class="btn"><a href="#">Button</a></div>

a{
  display:inline-block;
  padding:20px;
  text-decoration:none;
  color:white;
  background:#262626;
  font-family:Arial;
  transition:all 0.5s;
}
a:hover{
  background:#000;
}

【讨论】：

【解决方案2】：

以下是一个在 div 内有一个标签的示例，并且一个用于显示的：block 和 width 和 height 100%，因此现在整个 div 都可以点击了。

整个 div 都是可点击的

div{
background:green;
  height:100px;
  border:1px solid blue;

}
a{
  background:yellow;
  display:block;
  width:100%;
  height:100%;
  }

<div>
  <a href="http://google.co.in">google</a>
  </div>

【讨论】：

【解决方案3】：

要使 div 可点击，请执行以下操作

<div onclick="/*Your JavaScript Code*/" style="cursor:pointer;">

这应该适用于大多数用途。

【讨论】：

【解决方案4】：

您是否尝试在 css 上的 a 标签上添加 display:block。请尝试这个，希望它会工作

【讨论】：

你不是这个意思吗？

【解决方案5】：

试试这样：Demo

CSS：

a {
    display:block;
    background-color:yellow;
    text-decoration:none;
}
a span {
    display:block;
    background-color:red;
    color:#fff;
}

为<a>设置目标

<a href="http://google.com" target="_blank">...</a>

【讨论】：

【解决方案6】：

使父div相对定位，并在其中放置一个定位标记：绝对，设置top：0，right：0，bottom：0和left：0。

【讨论】：