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

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