css - div 内のリンクで div 内のスペース全体を埋めるにはどうすればよいですか?

Question

div幅が設定されていて、リンクにラップされています。内部のリンクが のスペース全体を埋めるようにして、 (ボタンのようにスタイル設定した)div内の任意の場所をクリックするとリンクに移動するようにします。divこれは私が試したものですが、.link_class私が望むことはしません。助言がありますか？

HTML:

<div class="button_class">
    <a class="link_class" href="http://www.my_link.com>My Link</a>
</div>

CSS:

.button_class {
    width:150px;
    padding:5px 7px;
    color:#fff;
    text-align:center;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

.link_class {
    width:100%;
    height:100%;
}

Answer 1

これでうまくいくはずです：-

デフォルトaではインライン要素であり、幅は影響しません。したがって、指定した幅になるように inline-block に変更します。

.link_class {
    display:inline-block;
    width:100%;
    height:100%;
}

フィドル

Answer 2

これはうまくいきました。div重要なのは、高さを明示的に設定してline-heightからリンクで使用することでした。

.button_class {
    width:150px;
    height:30px;
    color:#fff;
    text-align:center;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

.link_class {
    display:inline-block;
    width:100%;
    line-height:30px;
}

Answer 3

リンクをブロック レベルの要素にする必要があります。

.link_class {
    display: block;
}

Answer 4

そもそもなぜ外部divを使用するのですか? リンクのすべてのコードを記述し、リンクをボタンとして表示します。それはあなたの問題を単純化します。

.link_class{width:150px;height:30px;color:#fff;text-align:center;display: block;
           -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
           /*some other styles*/}

このデモを確認してください:フィドル

Answer 5

.button_class {
    display:flex;
}

.link_class {
  flex-grow: 1;
  text-align: center;   
}