[SOLUCIONADO] Enlace en etiqueta <li>

[ramondevesa]

Buenas, estoy intentando hacer el siguiente enlace:

Código HTML:

<li><a href="index.html">INICIO<div class="icon"><img src="images/icons/inicio.png"></div></a></li>
 

Como podeis ver combino un texto con una imagen, el problema lo tengo cuando el hueco que se crea entre la imagen y el texto, no responde al enlace ¿tengo alguna solución? he pensado en poner la etiqueta enlace delante de <li> pero lo considero una chapuza, quería leer si a alguien le ha ocurrido alguna vez o si me dais una alternativa :) gracias!!

[pzin]

¿Qué utilidad tienes ese div ahí? Yo lo quitaría, y seguramente desaparezca el problema, ya que ese elemento es un elemento de bloque.

[ramondevesa]

Ese div tiene las siguientes características:

Código CSS:

width: 50px;
            height: 50px;
            float: right;
            margin-top: -9px; 
            text-align: center;
            padding-top: 9px;
 

Ya que es un bloque el cual contiene la imagen que va justo al lado.

De todas formas, he eliminado el div y continua igual.

Saludos y gracias!

[agus__1987]

Prueba

Código HTML:

<li><div class="icon"><a href="index.html">INICIO<img src="images/icons/inicio.png"></a></div></li> 

También puedes meter inicio dentro de un span para configurar las propiedades,

[lilmaster]

Quita ese div.... pon en los estilos a la etiqueta <a> display:block

para que le puedas dar los estilos que le estas dando a ese div y listo

[ramondevesa]

Muchas gracias lilmaster !!!

[lilmaster]

Iniciado por ramondevesa

Muchas gracias lilmaster !!!

Con gusto