How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
HtmlCssHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
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; }
Solution 2 - Html
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 */
}
Solution 3 - Html
This will make the entire area clickable.
li a { display: block; }
Solution 4 - Html
li a{
display: inline-table;
height:95%;
width: 95%;
}
the 95 to anticipate any li margin or padding
Solution 5 - Html
Try this css
li{
border:1px solid black;
height:40px;
}
li a{
border:1px solid red;
display:block;
height:100%;
}
Solution 6 - Html
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!
Solution 7 - Html
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.