CSS- Make Entire Div Clickable by putting the div in <a href=#> is not working

Question

I have to make entire div with another elements inside it clickable. I do it by writing the dive inside <a href="#"> </a> like this:

<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>

For some reason instead putting the entire div to <a href="#"> </a> it put each element to different <a href="#"> </a> .

How I can I entire to aall div to <a href="#"> </a> ?

Answer 1

By default a <a> tag is displayed inline , any inline element is not really affected by padding , so if you want to make a button that is clickable everywhere inside it, make an empty div put the <a> in it and give it display:block; or display:inline-block; then you can add padding to it to expend it, or use width, depends what u need to do, here is a small 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;
}

Answer 2

Did you tried to add display:block on a tag on css. Pleas try this one hope it will work

Answer 3

Following is an example having a tag inside div and a made to display:block and width and height 100% so whole div is now clickable.

Whole div is clickable

 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> 

Answer 4

To make the div clickable, do

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

This should work for most purposes.

Answer 5

Try like this: Demo

CSS:

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

Set target for <a>

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

Answer 6

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