Como hacer el área aumentada de un enlace o elemento con padding clickeable en CSS

Supongamos que tenemos una estructura tal que así.

<ul>
  <li><a href="">Enlace1</a></li>
  <li><a href="">Enlace2</a></li>
  <li><a href="">Enlace3</a></li>
  <li><a href="">Enlace4</a></li>
  <li><a href="">Enlace5</a></li>
</ul>

No tiene por que ser un enlace, puede ser un párrafo, una foto.. Etc

El tema es que si aumentamos el área mediante un padding u otras formas, el área clickeable se limita al enlace, si pinchamos en lo que no es el enlace no hace nada.

Habia probado con display:block, pero tampoco funciona

¿Existe alguna forma de hacerlo?

1 respuesta

Respuesta
1

¿Algo así?

Buenas tardes amigo neoarcangel

<style>
ul{
border: 1px solid #dadada;
width: 200px;
list-style: none;
overflow: hidden;
overflow-x: auto;
padding: 10px;
}
li .liga{
display: block;
text-decoration: none;
text-align: left;
padding: 5px;
}
li .liga:hover{
background-color: steelblue;
color: white;
}
</style>

<ul>
<li><a href="javascript: return void(0);">Enlace1</a></li>
<li><a href="javascript: return void(0);">Enlace2</a></li>
<li><a href="javascript: return void(0);">Enlace3</a></li>
<li><a href="javascript: return void(0);">Enlace4</a></li>
<li><a href="javascript: return void(0);">Enlace5</a></li>
</ul>

<ul>
<li><a class="liga" href="javascript: return void(0);">Enlace1</a></li>
<li>
<span class="liga" style="width: 250px; bordeR: 1px solid #006699;">
Watashi wa watashi
<hr /> Soy un span
</span>
</li>
<li><button class="liga">Soy un botón</button></li>
<li><a class="liga" href="javascript: return void(0);">Enlace4</a></li>
<li><a class="liga" href="javascript: return void(0);">Enlace5</a></li>
</ul>

Bueno lo he estado probando y funciona perfectamente en tu ejemplo, sin embargo el código al que lo quiero aplicar es algo más largo y no me funcionaba tal cual, no obstante me he dado cuenta del problema, en tu ejemplo aplicas el display:block a un li, en mi caso funcionaba al aplicarlo a un enlace.

Muchas gracias tu respuesta, me ha servido para arreglar el problema.

Un saludo.

¡Gracias!

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas