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?
¿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!
