¿Cómo aumentar el área seleccionable de un botón de etiqueta <a>?

He aprendido de este post que siempre usan etiquetas <a> o etiquetas <button> para hacer 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 su ayuda.¿Cómo aumentar el área seleccionable de un botón de etiqueta <a>?

Fuente

2012-06-18 Ivan Wang

Uso <a /> cuando se necesita un enlace (la un de anclaje ). Use <button /> cuando necesite un botón.

Dicho esto, si realmente necesita expandir <a />, agregue el atributo CSS display: block; en él. Luego podrá especificar un ancho y/o una altura (es decir, como si fuera un <div />).

Fuente

2012-06-18 07:30:23 sp00m

Esto funciona perfectamente, y su respuesta llegó a la velocidad de la luz. Tu roca! Muchas gracias. –

Si te preocupa la semántica, la respuesta de t1m0thy parece ser la correcta. Ver: https://davidwalsh.name/html5-buttons – aldemarcalazans

Si está utilizando HTML 5, es decir, el tipo de documento

<!doctype html>

a continuación, puedes utilizar block-level links.

<a href="google.com"> 
    <div class="hello"> 
    .. 
    </div> 
</a>

Fuente

2012-06-18 07:29:46 Alex

Sí se puede si está utilizando HTML5, este código es válida no de otra manera:

<a href="#foo"><div>.......</div></a>

Si no está utilizando HTML5, puede hacer que su enlace block:

<a href="#foo" id="link">Click Here</a>

CSS:

#link { 
    display : block; 
    width:100px; 
    height:40px; 
}

en cuenta que se puede aplicar width, height sólo después de hacer su enlace elemento de bloque.

Fuente

2012-06-18 07:29:53 Sarfraz

Este código no tiene nada que ver con HTML5. La propiedad 'display' ha existido en CSS mucho antes de que las especificaciones de HTML5 siquiera se hayan iniciado. – poncha

@poncha: lo siento, el marcado erróneo al principio, decía sobre esto: '

.......

' por ejemplo, 'div' dentro de' a' es válido en html5. – Sarfraz

Ahora se ve mejor;) hizo +1 en esto ya que proporciona ambas soluciones – poncha

Simplemente haga el ancla display: block y width/height: 100%. Por ejemplo:

.button a { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

jsFiddle: http://jsfiddle.net/4mHTa/

Fuente

2012-06-18 07:31:10

exactamente lo que necesito, gracias –

Usted podría intentar usar display: block o display: inline-block. Puede encontrar un buen tutorial aquí: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Fuente

2012-06-18 07:34:17 DZittersteyn

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; 
}

El relleno aumenta el área que se puede hacer clic, el margen negativo mantiene el flujo de texto que lo rodea como debe ser (cuidado con los enlaces más que traslapan). Pantalla: se necesita un bloque en línea para poder establecer los márgenes y el margen y la posición debe ser relativa para que el índice z se pueda utilizar para que el área seleccionable permanezca en la parte superior del texto que sigue.

Fuente

2013-12-02 11:54:07 t1m0thy

funciona perfectamente en mi caso. –

esta es la respuesta real sobre * cómo aumentar el área seleccionable de un botón de etiqueta * – StefansArya

¡tan inteligente de hecho! –

agregue padding a la clase CSS de la etiqueta de anclaje. Si es necesario, agregue padding-top, padding-bottom, ... individualmente según el área seleccionable que desee. Funcionó para mí

Fuente

2014-05-07 06:56:18 Ramesh

¿Cómo aumentar el área seleccionable de un botón de etiqueta <a>?

Respuesta

Cuestiones relacionadas