リンクを作成<a></a>内容に合わせて調整可能

Question

私はサムネイルを使ってボタンを表示し、ボタンの下に説明があり、ボタンと説明はどちらもリンク内にあります。これは私のコードです：

<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> 

すべてが正常に動作しますが、リンクの一部であり、いくつかの空白があり、私はそれが起こることを望んでいない、私はクリック可能であることをその空白を必要としませんリンクとして。私はあなたに理解できるように2つの画像を表示します：

最初の画像では、外側の矩形はリンクのクリック可能な領域です。ボタンの他​​にリンクの一部である多くの空白があります。 リンク内のすべてのコンテンツを使用して、ボタンとテキストのリンク領域を調整することは可能ですか？ 2番目の画像は私が到達したいものを示しています、それは可能ですか？

thumbnailBorderクラスは関係ありません、これはとにかくコンテンツです：

.thumbnailBorder{ 
    border:none; 
} 

Answer 1

a内のボタンを使用しないでください。あなたがボタンを保持したい場合は、これを試してみてください。

<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> 

それを修正する必要があること。

Answer 3

<button>を<span>に変更し、<span>をボタンのようにスタイリングすることをお勧めします。

.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

のセマンティクスをお話しましょう。私が集めたものから、ページ上にボタンのように見せたい要素がありますが、アンカーのように振る舞います。つまり、基本となるHTMLは<button>/<input>タグですか、それとも<a>タグであるべきですか？言い換えれば、行動や視覚化をモデル化するのがより意味がありますか？

振る舞いはより意味があります。 CSS初心者の方は、.redよりも意味のあるクラス名が.dangerであることを伝えることができます。 .redを使うとデザインが制限され、実際に何が起こっているのかを実際には伝えないだけでなく、リファクタリングを妨げることになります。私を信頼してください。後でコードを読み返すと、何が起こっているのか知りたいでしょう。ページ上でどのように見えるかは、通常は関係ありません。

あなたのケースに戻ると、<input>タグ自体は<a>タグである必要があります。そして<div>ではそれにそのブロックレベルのスペースを与えることをラップ：

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

あなたは問題がその変化になるとどのくらいに簡単見ることができますか？今では本当に常に2つの<a>タグが必要であることは明らかです。あなたが描いたその形に要素を巧妙に成形することさえ、その変更を行う前に可能だったようです。だから、すべて一緒：あなたが本当にクリック可能であることを右ボタンとテキストの間にスペースが必要な場合は

今

<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> 

、あなたが最初に自分自身に問う必要があり、「どのようなユーザーは、彼らがここにクリックした場合の対処しようとしているのでしょうか？ "答えが「ボタンをクリックしていない」場合、それは完了です。しかし、クリック可能な空白が本当にあなたが望むUXであると決めるならば、<a>タグの中に<a>タグを実際にテキストの下まで伸ばして、ボタンのように見えるように、<span>を入れることができます。

とにかく、すべてがhere's a JSFiddleです。乾杯。