Make a link have 100% width

Css

Css Problem Overview

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

Css Solutions

Solution 1 - Css

Add display: block to your a element.

Solution 2 - Css

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!

Solution 3 - Css

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

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

Solution 4 - Css

item {display:flex;} item a {flex:none;}
Categories
Recommended Css Solutions

Previous Solution:

Javascript array sort and unique

JavascriptArraysSortingUnique

Next Solution:

Reload browser window after POST without prompting user to resend POST data

Javascript

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJason94View Question on Stackoverflow
Solution 1 - CssScott BrownView Answer on Stackoverflow
Solution 2 - CssEKonsView Answer on Stackoverflow
Solution 3 - CssJesper NView Answer on Stackoverflow
Solution 4 - CssYoldoshView Answer on Stackoverflow