wrap anchor tag around li element

Question

I am creating navigation menu. I want to use css so that anchor tag is wrapped around li element but anchor tags are inside li element.

Here is html

<ul>     <li><a href="">Uutiset</a></li>     <li><a href="">Foorumi</a></li>     <li><a href="">Kauppa</a></li>     <li><a href="">Messut</a></li>     <li><a href="">Asiakaspalvelu</a></li>     <li><a href="">Nakoislehti</a></li>     <li><a href="">Nae meidat</a></li> </ul> 

here is my less css

ul {   list-style-type: none;   padding: 0;   margin: 0;   li {     padding: 2% 4%;     border: 1px solid green;     a {         text-decoration: none;         display: block;     }   } } 

Answer 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>.

---

Update for 2022: wrapping your li tags with anchors is now totally acceptable.

Answer 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