Make Link <a></a> einstellbar Inhalt

Question

I Thumbnail bin mit einem Knopf zeigen und dann unter der Schaltfläche einer Beschreibung, die Taste und die Beschreibung sind beide in einem Link. Dies ist mein Code:

<div class="col-xs-6 col-md-6 center"> 
     <a class="thumbnail thumbnailBorder" style="display:inline-block" > 
      <input type="button" value="button"/>    
      <div> 
       <span>This is just some text for StackOverflow</span> 
      </div> 
     </a> 
    </div> 

Alles funktioniert gut, aber es gibt einigen weißen Raum, den Teil der Verbindung ist, und ich will nicht, dass das passiert, brauche ich nicht, dass Leerraum anklickbar zu sein als ein Link. Ich werde Ihnen zwei Bilder zeigen, so dass Sie verstehen können:

Im ersten Bild ist das äußere Rechteck der anklickbare Bereich für den Link, neben dem Button gibt es eine Menge Leerraum, der Teil des Links ist. Ist es möglich, den Link-Bereich nur auf die Schaltfläche und den Text mit all diesen Inhalten innerhalb eines Links anzupassen? Das zweite Bild zeigt, was ich erreichen möchte, ist es möglich?

Die thumbnailBorder Klasse nicht relevant ist, ist dies der Inhalt sowieso:

.thumbnailBorder{ 
    border:none; 
} 

Answer 1

Sie eine Taste nicht innerhalb eines a verwenden. Wenn Sie die Taste halten wollen, versuchen Sie dies:

<div class="col-xs-6 col-md-6 center"> 
 
    <form action="#"> 
 
    <input type="submit" value="button" /> 
 
    </form> 
 
    <div> 
 
    <a href="#" class="thumbnail thumbnailBorder" style="display:inline-block"> 
 
     <span>This is just some text for StackOverflow</span> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

<div class="col-xs-6 col-md-6 center"> 
    <a class="thumbnail thumbnailBorder" style="display:inline-block" > 
     <input type="button" value="button"/> 
    </a>   
     <div> 
      <a class="thumbnail thumbnailBorder" style="display:inline-block" > 
       <span>This is just some text for StackOverflow</span> 
      </a> 
     </div> 
</div> 

Das es beheben sollte.

Answer 3

Ich würde vorschlagen, <button> zu einem <span> ändern und das <span> wie eine Taste aussehen.

.btn { 
 
    display: inline-block; 
 
    padding: 0.5rem 1rem; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-family: Arial, sans-serif; 
 
    background-color: yellow; 
 
    border: 3px solid black; 
 
}

<a href="http://google.com" target="_blank"> 
 
    <span class="btn">Button</span> 
 
    <p> 
 
    A description goes here. 
 
    </p> 
 
</a>

Answer 4

<div class="col-xs-6 col-md-6 center"> 
    <div class="thumbnail thumbnailBorder" style="display:inline-block"> 
     <div style="display: flex; justify-content: center;"> 
      <input type="button" value="button"> 
     </div>    
     <div> 
      <a href="#"><span>This is just some text for StackOverflow</span></a> 
     </div> 
    </div> 
</div> 

Answer 5

Lassen Sie uns reden Semantik. Von dem, was ich erhalte, haben Sie ein Element auf der Seite, das wie eine Schaltfläche aussehen soll, sich aber wie ein Anker verhalten soll. Die Frage ist also: Sollte der zugrunde liegende HTML einen <button>/<input> Tag sein, oder sollte es einen <a> Tag sein? Mit anderen Worten, ist es semantischer, Verhalten oder Visualisierung zu modellieren?

Es stellte sich heraus Verhalten mehr semantische ist. Jeder CSS-Neuling kann Ihnen sagen, dass .danger ein semantischer Klassenname ist als .red. Die Verwendung von .red schränkt Ihr Design ein, behindert Refektoren und sagt nicht wirklich, was eigentlich vor sich geht. Glauben Sie mir, wenn Sie später Ihren Code zurücklesen, wollen Sie wissen, was vor sich geht. Wie es auf der Seite aussieht, ist normalerweise irrelevant.

Also zurück zu Ihrem Fall, dass <input> Tag selbst sollte ein <a> Tag sein. Und wickeln, dass in einem <div> es Raum, um seine Blockebene zu geben:

<div class="col-xs-6 col-md-6 center"> 
    <div> 
     <a class="btn thumbnail-trigger">button</a> 
    </div> 
    ... 
</div> 

Können Sie sehen, wie viel einfacher das Problem mit dieser Änderung wird? Jetzt ist es offensichtlich, dass Sie zwei <a> Tags benötigen, was wirklich immer der Fall war.Es war sogar möglich, ein Element in die Form zu hacken, die Sie gezeichnet haben, bevor Sie diese Änderung vornehmen. Also alles zusammen:

<div class="col-xs-6 col-md-6 center"> 
    <div> 
     <a class="btn thumbnail-trigger">button</a> 
    </div> 
    <div> 
     <a class="thumbnail-trigger">This is just some text for StackOverflow</a> 
    </div> 
</div> 

Nun, wenn Sie wirklich den Raum direkt zwischen dem Knopf und dem Text sein klickbare wollen, sollten Sie sich zuerst fragen: „Was wäre der Benutzer versucht zu tun, wenn sie hier angeklickt? " Wenn die Antwort lautet: "Klicken Sie nicht auf die Schaltfläche", wie es sein sollte, dann sind wir fertig. Aber wenn Sie entscheiden, dass klickbare Leerzeichen wirklich die UX ist, die Sie wollen, können Sie <span> innerhalb des Tags <a> setzen und das Aussehen wie eine Schaltfläche formatieren, während das <a>-Tag sich tatsächlich bis auf den Text erstreckt.

Egal, here's a JSFiddle mit all dem. Prost.