envuelve la etiqueta de anclaje alrededor del elemento li

Question

Estoy creando un menú de navegación. Quiero usar css para que la etiqueta de anclaje se ajuste alrededor del elemento li, pero las etiquetas de anclaje están dentro del elemento li.

Aquí es 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> 

aquí es mi menos 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

El único elemento legal permitido dentro de un <ul> es un <li>. No puede tener un ancla alrededor del <li>. Esto es cierto en HTML5, donde un anclaje puede rodear a otros elementos de nivel de bloque.

Lo que tienes en el CSS es casi allí, sólo tiene que añadir:

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

Y su ancla a llenar todo el espacio de la <li>.

Answer 2

No se puede hacer una li se puede hacer clic, pero lo que se puede hacer es la ampliación de la A-Link con el tamaño de la li como se sugiere aquí: https://stackoverflow.com/a/1121754/1068495

Answer 3

probar esto, dar el relleno para anclar en lugar de li . No es posible mantenerse fuera de li. Diseña tu anclaje en lugar de li. Deje que li actúe como un envoltorio.

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

Answer 4

no lo utilizo de relleno en li, utilice line-height para el texto de anclaje en su lugar. Esto hará que cubra la altura completa del elemento li.

Aquí, eche un vistazo a este Example