css - poner - ¿Cómo aumentar el área seleccionable de un botón de etiqueta<a>?
iconos html para web (7)
Para aumentar el área de un enlace de texto puede usar el siguiente CSS;
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
- Pantalla: se necesita un bloque en línea para poder establecer los márgenes y el relleno
- La posición debe ser relativa para que ...
- z-index se puede usar para hacer que el área clicable permanezca en la parte superior del texto que sigue.
- El relleno aumenta el área que se puede hacer clic
- El margen negativo mantiene el flujo del texto circundante como debería (tenga cuidado con los enlaces superpuestos)
Aprendí de esta post que siempre utilizo etiquetas <a> o <button> para crear el botón. Ahora estoy tratando de usar la etiqueta <a> . Mi pregunta es: ¿hay alguna manera de aumentar el área de clic de la etiqueta? Digamos que estoy usando <a> en una caja div. Quiero que toda la caja div se convierta en un botón. ¿Puedo cambiar el área de clic a la casilla div completa? Gracias por tu ayuda.
Puede intentar usar display: block o display: inline-block. Un buen tutorial se puede encontrar aquí: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Sí, puede hacerlo si usa HTML5 , este código no es válido de otra manera:
<a href="#foo"><div>.......</div></a>
Si no está utilizando HTML5, puede hacer que su block enlace:
<a href="#foo" id="link">Click Here</a>
CSS:
#link {
display : block;
width:100px;
height:40px;
}
Tenga en cuenta que puede aplicar width y height solo después de hacer su elemento de nivel de bloque de enlace.
Si está usando HTML 5, es decir, el doctype
<!doctype html>
entonces puedes usar enlaces a nivel de bloque .
<a href="google.com">
<div class="hello">
..
</div>
</a>
Simplemente haga la display: block anclaje display: block y width/height: 100% . P.ej:
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/4mHTa/
agregue padding a la clase de CSS de la etiqueta de anclaje. Si es necesario, agregue padding-top , padding-bottom , ... individualmente de acuerdo con el área seleccionable que desee. Funcionó para mí
Editar:
La respuesta de @ t1m0thy es más elegante que la mía, es mejor seguir sus consejos.
Además, un buen enlace propuesto por @aldemarcalazans en los comentarios: https://davidwalsh.name/html5-buttons .
Respuesta original:
Use <a /> cuando necesite un enlace (la a del anclaje ). Use <button /> cuando necesite un botón.
Dicho esto, si realmente necesita expandir un <a /> , agregue la display: block; atributo CSS display: block; en eso. Luego podrá especificar un ancho y / o una altura (es decir, como si fuera un <div /> ).