CSS-将div放入<a href="#"> is not working</a>,使整个Div可点击

时间:2015-03-11 08:13:46

标签: html css

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

6 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

您是否曾尝试在css上的display:block标记上添加a。请试试这个希望它会起作用

答案 2 :(得分:0)

下面是一个示例,在div中有一个标记,并且可以显示:块和宽度和高度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 :(得分:0)

要使div可点击,请执行

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

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

答案 4 :(得分:0)

请尝试以下操作: 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>

答案 5 :(得分:0)

使父div相对定位,并在其中放置一个锚标记,其位置为:absolute,设置top:0,right:0,bottom:0,left:0。