Comment utiliser CSS pour cliquer uniquement sur le lien dans la zone de définition pour sauter

Cet article explique comment utiliser Comment utiliser CSS pour cliquer uniquement sur le lien dans la zone de définition pour sauter pour réaliser un saut en cliquant sur un lien uniquement dans la zone de définition. Jetons un coup d'œil au contenu spécifique.

Regardons d'abord un exemple

HTML

<a href="//m.sbmmt.com/">
  <div class="toko">
    <h1>php中文网</h1>
  </div>
</a>

Comment utiliser CSS pour cliquer uniquement sur le lien dans la zone de définition pour sauter

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

a{
  text-decoration: none;
}

L'effet d'affichage sur le navigateur est le suivant :

Dans le code ci-dessus, nous créons une boîte URL avec "post" et créons la boîte entière un lien, de cette façon, la boîte deviendra définitivement une URL, mais lorsque vous cliquez en dehors du côté gauche ou droit de la boîte, le lien sautera également. Si nous voulons appliquer le lien uniquement dans le cadre de la boîte, comment y parvenir ?

Jetons ensuite un coup d'œil à la méthode de mise en œuvre spécifique

Nous devons d'abord connaître la raison, car la marque dans la case dans la balise a sera développer À la largeur de l'écran

Grâce au Comment utiliser CSS pour cliquer uniquement sur le lien dans la zone de définition pour sauter suivant, vous pouvez limiter la plage d'application du lien.

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

margin : 0 auto ; est utilisé pour spécifier une balise au lieu d'une marge. Alors, utilisez display:block pour changer la balise a en élément block. Spécifiez également la largeur comme largeur correspondante : 400 px ; bien qu'il y ait des avantages et des inconvénients à entourer des éléments de bloc avec des balises, c'est en effet une bonne approche.

Ce qui précède représente l'intégralité du contenu de cet article. Pour un contenu plus intéressant, vous pouvez consulter le Tutoriel vidéo Comment utiliser CSS pour cliquer uniquement sur le lien dans la zone de définition pour sauter et le Tutoriel vidéo HTML sur le php chinois. site Internet En savoir plus ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!