Wie kann der anklickbare Bereich eines Anker- oder Schaltflächenelements vergrößert werden?

Lesezeit: 4 Minuten

Benutzeravatar von Ivan Wang
Ivan Wang

Ich habe aus diesem Beitrag gelernt, dass immer Anker- oder Schaltflächenelemente verwendet werden, um Schaltflächen zu erstellen. Jetzt versuche ich, Ankerelemente zu verwenden.

Gibt es eine Möglichkeit, den klickbaren Bereich des Ankerelements zu vergrößern? Angenommen, ich verwende einen Anker in einer Div-Box. Ich möchte, dass die gesamte Div-Box zu einer Schaltfläche wird. Kann ich den Klickbereich des Ankers auf die gesamte Div-Box ändern? Danke für deine Hilfe.

Benutzeravatar von t1m0thy
t1m0thy

Um den Bereich eines Textlinks zu vergrößern, können Sie das folgende CSS verwenden;

a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 2em;
  margin: -2em;
}
<a href="">An anchor element</a>
  • Anzeige: inline-block wird benötigt, damit Ränder und Padding gesetzt werden können
  • Die Position muss relativ sein, damit …
  • z-index kann verwendet werden, damit der anklickbare Bereich über dem folgenden Text bleibt.
  • Die Polsterung vergrößert den Bereich, der angeklickt werden kann
  • Der negative Rand hält den Fluss des umgebenden Textes so, wie er sein sollte (achten Sie auf überlappende Links).

  • Dies ist die eigentliche Antwort auf So vergrößern Sie den anklickbaren Bereich einer Tag-Schaltfläche

    – StefansArya

    12. März 2017 um 9:05 Uhr

  • Dies war das erste Rezept, das ich gefunden habe, das mit einem Symbol daneben funktioniert hat, danke. Allerdings musste ich umstellen: padding: 0 2em; margin: 0 -2em; um zu verhindern, dass der anklickbare Bereich nach unten gedrückt wird.

    – Gringo Suave

    27. Juli 2017 um 18:56 Uhr

  • Ich musste auch einstellen box-sizing: content-box worauf zurückgesetzt wurde border-box per Bootstrap

    – Kyrill Durand

    9. Januar 2019 um 18:21 Uhr

  • Dies ist eine negative Marge in alle 4 Richtungen?

    – PJ Brunet

    25. April 2019 um 20:37 Uhr

  • Der Z-Index scheint in Chrome nicht notwendig zu sein? Vielleicht in anderen Browsern?

    – Beschützer eins

    14. Dezember 2020 um 14:38 Uhr

Benutzeravatar von sp00m
sp00m

Die Antwort von @ t1m0thy ist eleganter als meine. Es ist besser, seinem Rat zu folgen.

Auch ein schöner Link, der von @aldemarcalazans in den Kommentaren vorgeschlagen wurde: https://davidwalsh.name/html5-buttons.


Ursprüngliche Antwort:

Verwenden <a /> wenn Sie einen Link benötigen (die a von Anker). Verwenden <button /> wenn Sie einen Knopf brauchen.

Das heißt, wenn Sie wirklich einen erweitern müssen <a />fügen Sie das CSS-Attribut hinzu display: block; darauf. Sie können dann eine Breite und/oder Höhe angeben (also als wäre es ein <div />).

  • Das funktioniert perfekt, und Ihre Antwort kam in Lichtgeschwindigkeit. Dein Felsen! Ich danke dir sehr.

    – Ivan Wang

    18. Juni 2012 um 8:05 Uhr

  • Wenn Sie sich Sorgen um die Semantik machen, scheint die Antwort von t1m0thy die richtige Wahl zu sein. Sehen: davidwalsh.name/html5-Schaltflächen

    – Aldemarcalazans

    28. August 2017 um 19:38 Uhr

  • Facebook nutzt diesen Ansatz auch, um das Tippziel der Links in der Navigation für seine mobile Web-App zu erweitern. Ich bevorzuge diesen Ansatz, viel besser lesbar IMO. “// Tap-Ziel des Links größer machen”

    – Clifford Fajardo

    23. Juli 2018 um 18:32 Uhr

  • Denken Sie daran, zu machen display:block sowohl der Behälter der <a /> und auch die <a />. Dann sollten Sie verwenden padding für die <a />nicht für den Behälter der <a />.

    – Jaime Montoya

    29. April 2020 um 11:18 Uhr

Benutzeravatar von Sarfraz
Sarfraz

Ja, das können Sie, wenn Sie verwenden HTML5dieser Code ist gültig nicht anders:

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

Wenn Sie kein HTML5 verwenden, können Sie Ihren Link erstellen block:

#link {
  display: block;
  width: 100px;
  height: 40px;
}
<a href="#foo" id="link">Click Here</a>

Beachten Sie, dass Sie sich bewerben können width, height erst nachdem Sie Ihr Element auf Link-Block-Ebene erstellt haben.

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

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

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

Benutzeravatar von Inc33
Inc33

Für mich war die Padding-Lösung nicht gut, da ich den Rand auf der Schaltfläche verwendet habe und es schwierig gewesen wäre, das Markup zu ändern, um ein Overlay für den Touch-Bereich zu erstellen.

Also habe ich einfach das :before-Pseudoelement verwendet und ein Overlay erstellt, das in meinem Fall perfekt war, da das Klickereignis auf die gleiche Weise weitergegeben wurde.

button.my-button:before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  top: -6px;
  left: -5px;
  cursor: pointer;
}
<button class="my-button">A button</button>

  • Dies ist die beste Lösung, die den Check verdient. Sie können auch hinzufügen z-index falls irgendetwas den Berührungsbereich überlappt

    – Arthur Khazbs

    11. Februar um 22:09 Uhr

Benutzeravatar von Alex
Alex

Wenn Sie HTML 5 verwenden, dh die Datei doctype

<!doctype html>

dann kannst du einfach verwenden Links auf Blockebene.

<a href="https://stackoverflow.com/questions/11078509/google.com">
  <div class="hello">
    ..
  </div>
</a>

  • Dies ist die beste Lösung, die den Check verdient. Sie können auch hinzufügen z-index falls irgendetwas den Berührungsbereich überlappt

    – Arthur Khazbs

    11. Februar um 22:09 Uhr

Rameshs Benutzeravatar
Ramesh

hinzufügen padding zur CSS-Klasse des Anchor-Tags. Fügen Sie bei Bedarf hinzu padding-top, padding-bottom,… individuell nach gewünschtem klickbarem Bereich. Es hat für mich funktioniert.

1433730cookie-checkWie kann der anklickbare Bereich eines Anker- oder Schaltflächenelements vergrößert werden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy