如何在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是内联元素,宽度不会影响它们.因此,将其更改为内联块以使其占用您指定的宽度.

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

小提琴

Answer 2

这是解决方案.

HTML:

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

CSS:

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

.link_class {
    display:block;
    color:#ffffff;
    overflow:auto;
    padding:5px 7px;    
}

希望这可以帮助.