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

Uutiset
     
Foorumi
     
Kauppa
     
Messut
     
Asiakaspalvelu
     
Nakoislehti
     
Nae meidat
 

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

回答1:

The only legal element allowed inside a

is an

. You cannot have an anchor wrapped around the

. 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

.

回答2:

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

回答3:

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

回答4:

Try this, give the padding to anchor instead of li. It is not possible to keep outside li. Do style your anchor instead of li. Let li act just like a wrapper.

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

转载请标明出处:wrap anchor tag around li element

文章来源: wrap anchor tag around li element