Как сделать весь div ссылкой?

Ответ 1

Вам необходимо присвоить свойству display: block; привязку привязки. В противном случае это будет неверно завершено.

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

Ответ 2

Использование

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

работает в браузерах, даже если он нарушает текущие спецификации HTML. Это разрешено в соответствии с черновиками HTML5.

Когда вы говорите, что он не работает, вы должны точно объяснить, что вы сделали (в том числе код jsfiddle - хорошая идея), что вы ожидали и как поведение отличается от ваших ожиданий.

Неясно, что вы подразумеваете под "всем содержимым в этом div в css", но я предполагаю, что это означает, что контент действительно пуст в разметке HTML, и у вас есть CSS как

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

Затем весь блок можно щелкнуть, а текст содержания будет выглядеть как текст ссылки. Разве это не то, что вы ожидали?

Ответ 3

html:

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

css:

.xyz{
  display: block;
}

Это сделает якорь элементом уровня блока, таким как div.

Ответ 4

Обтекание <a> вокруг не будет работать (если вы не установите <div> в display:inline-block; или display:block; в <a>), потому что div является элементом уровня блока, а <a> нет.

<a href="#" onclick="location.href='http://www.example.com'; return false;" style="display:block;">
   <div>
       content
   </div>
</a>

<a href="#" onclick="location.href='http://www.example.com'; return false;">
   <div style="display:inline-block;">
       content
   </div>
</a>

<a href="#" onclick="location.href='http://www.example.com'; return false;">
   <span>
       content
   </span >
</a>

<a href="#" onclick="location.href='http://www.example.com'; return false;">
   content
</a>

Но, возможно, вам следует пропустить <div> и выбрать вместо него <span> или просто просто <a>. И если вы действительно хотите сделать div интерактивным, вы можете подключить javascript-перенаправление с помощью обработчика onclick, что-то вроде:

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

но я бы рекомендовал против этого.