<DIV> innerhalb eines Links (<a href="">) Tag

Question

Ich möchte ein Div anklickbar und aber innerhalb dieser machen <div> Ich habe eine andere <div> die ebenfalls anklickbar oder verlinkt sein sollten.

HTML

<a href="#">
    <div class="box">
       <div class="plus"><img src="aaa.jpg"/></div>
    </div>
</a>

CSS

.box{
    float:left;
    width:100px;
    height:100px;
}
.plus{
    float:left;
    width:30px;
    height:30px;
}

Kann ich beides machen? <div> s zu verlinken und für verschiedene Links?

und ist dies der richtige Weg verwenden div innerhalb a href ?

Answer 1

Ab HTML5 ist es in Ordnung, zu verpacken <a> Elemente um eine <div> (oder beliebige andere Blockelemente):

Das a-Element kann ganze Absätze, Listen, Tabellen usw. umschließen, sogar ganze Abschnitte, solange sich darin keine interaktiven Inhalte befinden (z. B. Schaltflächen oder andere Links).

Sie müssen nur darauf achten, dass Sie nicht ein <a> innerhalb Ihrer <a> ( oder ein <button> ).

Answer 2

Non, die Verknüpfung, die dem enthaltenen <a> wird jedem darin enthaltenen Element zugewiesen.

Und das ist nicht der richtige Weg. Sie können eine <a> sich verhalten wie ein <div> .

Ein Beispiel [Demo]

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

Answer 3

Dies ist ein klassischer Fall von divitis - brauchen Sie kein anklickbares div, sondern geben Sie einfach die <a> eine Klasse markieren. Bearbeiten Sie dann das CSS der Klasse auf display:block und definieren Sie eine Höhe und Breite, wie bereits in vielen anderen Antworten erwähnt.

En <a> Tag funktioniert sehr gut allein, so dass Sie keine zusätzliche Auszeichnungsebene auf der Seite benötigen.

Answer 4

Eine Verschachtelung von 'a' ist nicht möglich. Wenn Sie jedoch unbedingt die Struktur beibehalten wollen und es trotzdem so funktionieren soll, wie Sie es sich vorstellen, dann überschreiben Sie den Anker-Tag-Klick in javascript /jquery .

so können Sie 2 Ereignis-Listener für die beiden haben und sie entsprechend steuern.

Answer 5

Ich denke, Sie sollten es andersherum machen. Definieren Sie Ihre Div s und haben Ihre a href innerhalb jeder Div , die auf verschiedene Links verweisen