68

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

1
  • wrapped the box with the <a>...</a>?
    – Sotiris
    Commented Feb 1, 2011 at 10:11

4 Answers 4

185

Add display: block to your a element.

30

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!

0
6

To make the link fill out all available space, you can use flexbox:

li {
    display: flex;
}
li > a { 
    flex: 1;
}
1
item {display:flex;} item a {flex:none;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.