web-dev-qa-db-ja.com

<a>タグボタンのクリック可能な領域を増やす方法は？

私はこれから学んだ post 常に<a>タグまたは<button>タグを使用してボタンを作成します。今、私は<a>タグを使用しようとしています。私の質問は、タグのクリック可能な領域を増やす方法はありますか？ divボックスで<a>を使用しているとします。 divボックス全体をボタンにしたいです。クリック領域をdivボックス全体に変更できますか？ご協力ありがとうございます。

cssbuttonhtmlclickable
55
Ivan Wang

編集：

@ t1m0thyの答え は私のものよりもエレガントです。彼のアドバイスに従ってください。

また、コメントの @ aldemarcalazans によって提案されたNiceリンク： https://davidwalsh.name/html5-buttons 。

元の答え：

つかいます <a />リンクが必要な場合（aofanchor）。つかいます <button />ボタンが必要なとき。

とは言っても、本当に<a />、CSS属性を追加display: block;その上。その後、幅や高さを指定できるようになります（つまり、<div />）。

48
sp00m

テキストリンクの領域を増やすには、次のCSSを使用できます。

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
  • 表示：マージンとパディングを設定できるように、インラインブロックが必要です
  • 位置は相対的でなければならないので...
  • z-indexを使用して、クリック可能な領域を後続のテキストの上に維持することができます。
  • パディングはクリックできる領域を増やします
  • 負のマージンは、周囲のテキストの流れをあるべき状態に保ちます（リンクの重複を注意してください）
106
t1m0thy

はいHTML5を使用している場合、このコードはvalidです。

<a href="#foo"><div>.......</div></a>

HTML5を使用していない場合は、リンクを作成できますblock：

<a href="#foo" id="link">Click Here</a>

CSS：

#link {
  display : block;
  width:100px;
  height:40px;
}

width、heightは、リンクブロックレベルの要素を作成した後にのみ適用できることに注意してください。

17
Sarfraz

アンカーを作るdisplay: blockおよびwidth/height: 100%。例えば：

.button a {
    display: block;
    width: 100%;
    height: 100%;
}

jsFiddle： http://jsfiddle.net/4mHTa/

9
Christian Varga

アンカータグのCSSクラスにpaddingを追加します。必要に応じて、必要なクリック可能な領域に応じて、padding-top、padding-bottom、...を個別に追加します。それは私のために働いた。

8
Ramesh

HTML 5、つまりdoctypeを使用している場合

<!doctype html>

次に、 block-level links を使用できます。

<a href="google.com">
  <div class="hello">
    ..
  </div>
</a>
8
Alex

Display：blockまたはdisplay：inline-blockを使用してみてください。素敵なチュートリアルはここにあります： http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ =

4
DZittersteyn

位置cssプロパティを使用し、上、右、下、左をゼロに設定します。リンク「テキスト」を表示したくないが、リンク「 text "、text-indentを使用しないでください

display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
0
Umer Farooq