How do I make an tag the size of it's parent tag for larger clickable region?

Question

I would like to do this so that the clickable region on the tag is size of the LI.

My html looks like:

Answer 1

If you currently have this same question you can simply add padding to the right place:

li {
  //remove any padding or margin attributes from here
}

li a {
  display: block;
  padding: 20px; //or however big you want the clickable area to be
}

Anchor tags are by default inline elements, so you have to explicitly change them to display as block elements before you can mess with the padding or the margins.

Hope this helps!

Answer 2

In CSS:

li a {
     display: block;
}

Of course, you'll want to make your selector more specific than that.

<ul>
    <li class="myClass">
        <a href="#">Link</a>
    </li>
</ul>

li.myClass a {
    display: block;
    background-color: #fdd; /* Demo only */
}

http://jsfiddle.net/userdude/jmj2k/

Answer 3

li a{     
display: inline-table;
height:95%;    
width: 95%;
}

the 95 to anticipate any li margin or padding

Answer 4

Just another option I used is create a transparent png image in photoshop and put it inside the anchor tag, make its position absolute and increase its dimensions to fit that parent div you want and you could have a large clickable area.

<a href="test.html" />
 <img id="cover_img" src="cover.png" />
</a>

#cover_img {
display: block;
height: 200px;
width: 193px;
position: absolute;
}

Might be useful in certain circumstances.

Answer 5

As others have said

li a { display: block; }

should achieve what you're after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:

li { padding: 0; }
  li a { display: block; padding: 1em; }

Answer 6

Try this css

li{
    border:1px solid black;
    height:40px;
}

li a{
    border:1px solid red;
    display:block;
    height:100%;
}