wrap anchor tag around li element

Solution 1:

The only legal element allowed inside a <ul> is an <li>. You cannot have an anchor wrapped around the <li>. This holds true in HTML5, where an anchor can wrap around other block level elements.

What you have in CSS is nearly there, just add:

a {
     text-decoration: none;
     display: block;
     width: 100%;
     height: 100%;
}

And your anchor shall fill the entire space of the <li>.

Solution 2:

Dont use padding in li , use line-height for the anchor text instead. This will make it cover full height of li element .

Here, have a look at this Example

Solution 3:

You can't make a li clickable, but what you can do is expanding the a-link to the size of the li as suggested here: https://stackoverflow.com/a/1121754/1068495

wrap anchor tag around li element

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts