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

Question 1

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.

Question 2

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).

Question 3

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 />).

Question 4

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.

Question 5

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/

Question 6

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>

Question 7

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>

Question 8

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.