[SOLUCIONADO] Duda sobre las etiquetas <ul> <li> y <a>

[jonyjdv]

Hola gente tengo una duda seria correcto lo siguiente:

Código HTML:

<ul>
<a href=#"><li>texto</li></a>
</ul> 

actualmente lo tengo asi:

Código HTML:

<ul>
<li><a href=#">texto</a></li>
</ul> 

El problema es que como lo tengo ahora si el li es de 100px y el <a> ocupa con el texto por ejemplo 20px el <a> solo funciona en los 20px y necesito que funcione en todo el ancho del li. Gracias

[DesgraciadoGabo]

ajustalo con estilos amigo, por ejemplo en tus estilos debes hacer algo similar a lo siguiente:

Código CSS:

ul li a{
  display:block;
  width:100%;
  height:100%;
}
 

o en todo caso especifica las medidas del botón, pero tu primer ejemplo esta mal así esta mal trabajado, siempre se maneja primer ul luego li y dentro el enlace, saludos!

[Rafael]

Probablemente en lugar de display: block, es mejor inline-block.

En mi caso no defino el li, sino el a dentro del li.

Usando lo mismo que puso Gabo, pero completándolo uso:

Código CSS:

nav > ul > li > a {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  ...}
 

y ahí dos opciones, o el ancho fijo o el ancho dependiendo de el largo de la palabra uso width: 200px o padding-left y padding right. (el padding lo uso simplificado en realidad.

[jonyjdv]

Iniciado por Rafael

Probablemente en lugar de display: block, es mejor inline-block.

En mi caso no defino el li, sino el a dentro del li.

Usando lo mismo que puso Gabo, pero completándolo uso:

Código CSS:

nav > ul > li > a {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  ...}
 

y ahí dos opciones, o el ancho fijo o el ancho dependiendo de el largo de la palabra uso width: 200px o padding-left y padding right. (el padding lo uso simplificado en realidad.

Muchisimas gracias, no se como no se me ocurrio