html - How do I make an <a> tag the size of it's parent <li> 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:

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

Answer 1

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