html - CSS-通过将 div 放在 中使整个 Div 可点击不起作用

Question

我必须使整个 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> ？

Answer 1

默认一个<a>标签显示inline , 任何行内元素都不会真正受到 padding 的影响, 所以如果你想制作一个在里面到处都可以点击的按钮，制作一个空的 div放 <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;
}