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

wrap anchor tag around li element

Sign up