Como utilizar el tamaño de una etiqueta al 100% de un

publicado por: Anonymous

Buen dia mi pregunta es un tanto sencilla y me gustaria saberlo hacer de una manera correcta o una buena practica.

<ul>
 <li>
  <a>enlace</a>
 </li>
</ul>

al agregar los estilos correspondientes (sin padding)
quiero que al estar posicionado en cualquier parte del elemento lista tenga la dimension de la etiqueta a en pocas palabras que etiqueta a tenga el 100% de tamaño del li y no solo al posicionarse en el texto de etiqueta a

solución

<a> es un elemento inline, por lo tanto no le puedes asignar dimensiones.

Tienes que cambiarlo a un elemento block y así le puedes dar un width: 100%; y tendrás todo el ancho del <li>:

Variante: display: inline-block;

_x000D_

_x000D_

li {_x000D_
  /* no relevante */_x000D_
  list-style: none;_x000D_
  width: 100px;_x000D_
}_x000D_
_x000D_
a {_x000D_
  width: 100%;_x000D_
  display: inline-block;_x000D_
  _x000D_
  /* no relevante */_x000D_
  color: white;_x000D_
  background: red;_x000D_
  text-decoration: none;_x000D_
  text-align: center;_x000D_
}

_x000D_

<ul>_x000D_
 <li>_x000D_
  <a href=".">enlace</a>_x000D_
 </li>_x000D_
</ul>

_x000D_

_x000D_

_x000D_

Variante: display: block;

_x000D_

_x000D_

li {_x000D_
    /* no relevante */_x000D_
    list-style: none;_x000D_
    width: 100px;_x000D_
}_x000D_
_x000D_
a {_x000D_
  /* width: 100%; default */_x000D_
  display: block;_x000D_
_x000D_
  /* no relevante */_x000D_
  color: white;_x000D_
  background: red;_x000D_
  text-decoration: none;_x000D_
  text-align: center;_x000D_
}

_x000D_

<ul>_x000D_
  <li>_x000D_
    <a href=".">enlace</a>_x000D_
  </li>_x000D_
</ul>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *