2619 2619 - 1 year ago 79
CSS Question

wrap anchor tag around li element

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

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

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 Source

The only legal thing allowed inside a UL is an LI. You cannot have an anchor wrapped around the LI.

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.