So verwenden Sie CSS, um zum Springen nur auf den Link im Set-Feld zu klicken

In diesem Artikel erfahren Sie, wie Sie mithilfe von So verwenden Sie CSS, um zum Springen nur auf den Link im Set-Feld zu klicken einen Sprung erzielen, indem Sie nur auf einen Link innerhalb des festgelegten Felds klicken.

Schauen wir uns zunächst ein Beispiel an

HTML

<a href="http://www.php.cn/">
  <div class="toko">
    <h1>php中文网</h1>
  </div>
</a>

So verwenden Sie CSS, um zum Springen nur auf den Link im Set-Feld zu klicken

.toko{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #389bc2;
  color: #ffffff;
  text-align: center;
}
.toko:hover{
  opacity: 0.5;
}

a{
  text-decoration: none;
}

Der Anzeigeeffekt im Browser ist wie folgt:

Im obigen Code erstellen wir ein URL-Feld mit „Post“ und machen das gesamte Feld zu einem Link, also Ja, das Feld muss sich in eine URL umgewandelt haben, aber wenn Sie außerhalb der linken oder rechten Seite des Felds klicken, springt der Link. Wie erreichen wir das, wenn wir den Link nur innerhalb des Box-Bereichs anwenden möchten?

Als nächstes werfen wir einen Blick auf die spezifische Implementierungsmethode

Wir müssen zuerst den Grund dafür kennen, weil die Markierung im Kästchen im a-Tag angezeigt wird Auf die Bildschirmbreite erweitern

Durch das folgende So verwenden Sie CSS, um zum Springen nur auf den Link im Set-Feld zu klicken können Sie den Anwendungsbereich des Links einschränken.

a{
  text-decoration: none;
  margin: 0 auto;
  display: block;
  width: 600px;
}

margin: 0 auto; wird verwendet, um ein Tag anstelle von margin anzugeben. Verwenden Sie also display:block, um das Tag a in ein Blockelement zu ändern. Geben Sie außerdem die Breite als entsprechende Breite an: 400 px; obwohl es Vor- und Nachteile hat, Blockelemente mit Tags zu umgeben, ist es in der Tat ein guter Ansatz.

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere verwandte spannende Inhalte finden Sie im So verwenden Sie CSS, um zum Springen nur auf den Link im Set-Feld zu klicken-Video-Tutorial, HTML-Video-Tutorial auf PHP-Chinesisch Website Erfahren Sie mehr! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um zum Springen nur auf den Link im Set-Feld zu klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!