91

この投稿から、常に<a>タグまたは<button>タグを使用してボタンを作成することを学びました。今、私は<a>タグを使用しようとしています。私の質問は: タグのクリック可能な領域を増やす方法はありますか? <a>div ボックスで使用しているとします。divボックス全体をボタンにしたい。クリック領域を div ボックス全体に変更できますか? 助けてくれてありがとう。

4

11 に答える 11

178

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

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
  • 表示: マージンとパディングを設定できるようにインラインブロックが必要です
  • 位置は相対的である必要があるため...
  • z-index を使用して、クリック可能な領域を後続のテキストの上に置くことができます。
  • パディングはクリックできる領域を増やします
  • 負のマージンにより、周囲のテキストの流れが維持されます (リンクのオーバーラップに注意してください)。
于 2013-12-02T11:54:07.010 に答える
59

編集：

@ t1m0thyの答えは私のものよりもエレガントです、彼のアドバイスに従うほうがいいです。

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

元の答え：

リンク（アンカーのa ）が<a />必要な場合に使用します。ボタンが必要なときに使用します。<button />

とはいえ、本当に展開する必要がある場合は<a />、CSS属性を追加display: block;してください。次に、幅や高さを指定できるようになります（つまり、のように<div />）。

于 2012-06-18T07:30:23.143 に答える
20

はい、 HTML5を使用している場合は可能ですが、それ以外の場合はこのコードは有効ではありません。

<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

于 2012-06-18T07:29:53.787 に答える
11

アンカーdisplay: blockを作成してwidth/height: 100%。例えば：

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

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

于 2012-06-18T07:31:10.483 に答える
9

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

<!doctype html>

次に、ブロックレベルのリンクを使用できます。

<a href="google.com">
  <div class="hello">
    ..
  </div>
</a>
于 2012-06-18T07:29:46.220 に答える
9

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

于 2014-05-07T06:56:18.423 に答える
7

私にとっては、ボタンに境界線を使用していたため、パディング ソリューションは良くありませんでした。タッチ領域のオーバーレイを作成するためにマークアップを変更するのは困難でした。

私がしたことは、:before 疑似タグを使用してオーバーレイを作成したことです。これは、クリック イベントが同じように伝播したため、私の場合は完璧でした。

button.my-button:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    top: -6px;
    left: -5px;
}
于 2020-02-26T07:39:11.123 に答える
5

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

于 2012-06-18T07:34:17.683 に答える