I have a box that is X px wide. And in it i have a list (<ul>
) with link elements (<li><a ..></a><li>
)
How can i with CSS make the link clickable outside the text and in 100% width of the box. Making each line in the box clickable :D
I agree with Scott, but I would recommend this code instead:
a {
display: inline-block;
width: 100%;
}
or this code:
<ul>
<li><a href="topage" style="display: inline-block">text</a></li>
</ul>
I recommend display: inline-block
because display: block
makes the <a>
element appear in its line. (Both will be fine in this case, but not in all cases)
Edit: It seems that width:100%
was not referenced. Thanks to @LGSon for commenting out!
To make the link fill out all available space, you can use flexbox:
li {
display: flex;
}
li > a {
flex: 1;
}
<a>...</a>
?