Comment faire pour que toute la division soit un lien ?

Question

J'ai un div comme ceci <div class="xyz"></div> et tout le contenu de cette division est dans la css. Comment puis-je transformer cette division en lien ? J'ai essayé de l'entourer de la balise a, mais cela ne semble pas fonctionner.

Merci !

Answer 1

Vous devez attribuer display: block; à l'ancre d'habillage. Sinon, l'habillage ne se fera pas correctement.

<a style="display:block" href="http://justinbieber.com">
  <div class="xyz">My div contents</div>
</a>

Answer 2

Utilisation de

<a href="foo.html"><div class="xyz"></div></a>

fonctionne dans les navigateurs, même s'il viole les spécifications HTML actuelles. Il est autorisé selon les ébauches HTML5.

Lorsque vous dites que cela ne fonctionne pas, vous devez expliquer exactement ce que vous avez fait (inclure le code jsfiddle est une bonne idée), ce que vous attendiez, et comment le comportement diffère de vos attentes.

Ce que vous entendez par "tout le contenu de ce div est dans le css" n'est pas clair, mais je suppose que cela signifie que le contenu est vraiment vide dans le balisage HTML et que vous avez un CSS du genre

.xyz:before { content: "Hello world"; }

L'ensemble du bloc est alors cliquable, le texte du contenu ressemblant alors à un texte de lien. N'est-ce pas ce que vous attendiez ?

Answer 3

Emballage d'un <a> ne fonctionnera pas (à moins que vous ne définissiez l'option <div> a display:inline-block; o display:block; à la <a> ) parce que le div est un élément de niveau bloc et que l'élément <a> ne l'est pas.

<a href="http://www.example.com" style="display:block;">
   <div>
       content
   </div>
</a>

<a href="http://www.example.com">
   <div style="display:inline-block;">
       content
   </div>
</a>

<a href="http://www.example.com">
   <span>
       content
   </span >
</a>

<a href="http://www.example.com">
   content
</a>

Mais peut-être que vous devriez sauter le <div> et choisir un <span> à la place, ou simplement le <a> . Et si vous voulez vraiment que le div soit cliquable, vous pouvez attacher une redirection javascript avec un gestionnaire onclick, quelque chose comme ça :

document.getElementById("myId").setAttribute('onclick', 'location.href = "url"'); 

mais je vous le déconseille.

Answer 4

Le html :

 <a class="xyz">your content</a>

le css :

.xyz{
  display: block;
}

Ainsi, l'ancre sera un élément de niveau bloc comme un div.