Home » Html » How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

My html looks like:

<li>
 <a href="#">Link</a>
</li>
Answers:

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

Questions:
Answers:

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/

Questions:
Answers:

This will make the entire area clickable.

li a { display: block; }

Questions:
Answers:

Try this css

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

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

Questions:
Answers:

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!

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

the 95 to anticipate any li margin or padding

Questions:
Answers:

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.