Wie kann der anklickbare Bereich eines <a> Tag-Buttons vergrößert werden?

Ich habe aus diesem post gelernt, dass immer <a> Tags oder <button> Tags verwenden, um Knopf zu machen. Jetzt versuche ich <a> Tag zu verwenden. Meine Frage ist: Gibt es eine Möglichkeit, den klickbaren Bereich des Tags zu erhöhen? Angenommen, ich verwende <a> in einer Div-Box. Ich möchte, dass die ganze Div-Box zu einem Button wird. Kann ich den Klickbereich in die ganze Div-Box ändern? Danke für Ihre Hilfe.Wie kann der anklickbare Bereich eines <a> Tag-Buttons vergrößert werden?

Quelle

2012-06-18 Ivan Wang

Verwenden <a /> wenn Sie einen Link benötigen (die ein von Anker). Verwenden Sie <button />, wenn Sie eine Schaltfläche benötigen. Wenn Sie wirklich eine <a /> erweitern möchten, fügen Sie das CSS-Attribut display: block; darauf hinzu. Sie können dann eine Breite und/oder eine Höhe angeben (d. H. Als wäre es eine <div />).

Quelle

2012-06-18 07:30:23 sp00m

Dies funktioniert perfekt, und Ihre Antwort kam in Lichtgeschwindigkeit. Dein Stein! Ich danke dir sehr. –

Wenn Sie sich Gedanken über Semantik machen, scheint die Antwort von t1m0thy die richtige Wahl zu sein. Siehe: https://davidwalsh.name/html5-buttons – aldemarcalazans

Wenn Sie mit HTML 5, das heißt der Doctype

<!doctype html>

dann können Sie nur block-level links verwenden.

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

Quelle

2012-06-18 07:29:46 Alex

Ja, Sie können, wenn Sie mit HTML5, dieser Code ist gültig nicht anders:

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

Wenn Sie nicht HTML5 verwenden, können Sie Ihren Link block machen:

CSS:

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

Beachten Sie, dass Sie width anwenden können, height nur nach Ihrem Link Block-Element zu machen.

Quelle

2012-06-18 07:29:53 Sarfraz

Dieser Code hat nichts mit HTML5 zu tun. Die 'display' -Eigenschaft existiert in CSS lange bevor die HTML5-Spezifikation überhaupt gestartet wurde. – poncha

@ponacha: Entschuldigung falsch ursprünglich Markup, sagte darüber: '

.......

' zB 'div' innerhalb' a' ist gültig in html5. – Sarfraz

Jetzt sieht es besser aus;) + 1'd dies als das bietet beide Lösungen – poncha

Machen Sie einfach den Anker display: block und width/height: 100%. ZB:

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

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

Quelle

2012-06-18 07:31:10

genau das, was ich brauche, danke –

Sie könnten versuchen, mit display: block oder display: inline-block. Ein nettes Tutorial finden Sie hier: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Quelle

2012-06-18 07:34:17 DZittersteyn

Um den Bereich einer Textverknüpfung zu vergrößern, können Sie das folgende css verwenden;

a {  
display: inline-block;  
position: relative;  
z-index: 1;  
padding: 2em;  
margin: -2em; 
}

Die Polsterung erhöht die Fläche, die angeklickt werden können, der negativer Randtext den Fluss des umgebenden hält, wie es (Vorsicht über Läppen Links) sein sollte. Anzeige: Inline-Block ist erforderlich, damit Ränder und Abstände gesetzt werden können und die Position relativ sein muss, damit z-index verwendet werden kann, um den anklickbaren Bereich über jedem nachfolgenden Text zu halten.

Quelle

2013-12-02 11:54:07 t1m0thy

funktioniert perfekt in meinem Fall. –

Dies ist die echte Antwort auf * wie anklickbare Fläche eines Tags Schaltfläche * – StefansArya

so clever in der Tat zu erhöhen! –

Fügen Sie padding zur CSS-Klasse des Anchor-Tags hinzu. Fügen Sie bei Bedarf padding-top, padding-bottom, ... individuell hinzu, je nach dem anklickbaren Bereich, den Sie möchten. Es hat für mich funktioniert.

Quelle

2014-05-07 06:56:18 Ramesh

Wie kann der anklickbare Bereich eines <a> Tag-Buttons vergrößert werden?

Antwort

Verwandte Themen