html - HTML -ボーダーでクリック可能にする方法は?

Question

score 3 · Accepted Answer

要素をフロートさせて固定幅にしないと、ブロックはうまく機能しません。「インラインブロック」の方がうまくいくと思います。

.myclass{
    display: inline-block;
    border: 2px solid #000;
    padding: 1em;
}

ここで実際の動作を確認できます: http://jsfiddle.net/2tmzL/

インラインブロックのブラウザサポートはかなり良好です: http://caniuse.com/inline-block

score 1 · Accepted Answer

アンカータグを別のコンテナ要素に巻き付ける

<a class=".." href=".."><div>Click here</div><a>

score 0 · Accepted Answer

< a > は inline です。これをブロックに変換する必要があります。これを試してください

.myclass:
{
  display:block;
  border: 2px solid #000;
  padding: 1em;
}

score 0 · Accepted Answer

a 要素の css プロパティ display: block または inline-block (ケースに応じて...) を設定する必要があります。

score 0 · Accepted Answer

リンク全体をクリックできるようです。.myclass の後に : を必ず削除してください。また、それでもうまくいかない場合は、display:block; を追加してみてください。

あるいは、html5 では、ブロック要素を a タグで囲むことができます。正しくありませんが、これは古い html でも機能します。

.myclass
{
    border: 2px solid #000;
    padding: 1em;
    display:block;
}

score 0 · Accepted Answer

問題は、a がインライン要素であり、パディングがインライン要素で期待どおりに機能しないことです。a をブロックレベル要素に変更すると、すべてが期待どおりに機能するはずです (CSS 宣言の「:」が削除されていることに注意してください。これは存在しないはずです)。

.myclass {
   display: block;
   border: 2px solid #000;
   padding: 1em;
}

6 に答える 6