如何使div内的链接填充div内的整个空间? [英] How can I make a link inside a div fill the entire space inside the div?

问题描述

我有一个div，它具有设定的宽度，并且包裹在链接中.我希望内部的链接填充div的整个空间，以便当我单击div内的任何位置(我将其样式化为看起来像一个按钮)时，它会转到该链接.这是我尝试过的，但是.link_class并没有执行我想要的操作.有什么建议吗?

I have a div that has a set width and it is wrapped around a link. I want the link inside to fill the entire space of the div so that when I click anywhere inside the div (which I have styled to look like a button) it goes to the link. This is what I have tried, but .link_class doesn't do what I want. Any suggestions?

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%;
}

推荐答案

这应该可以解决问题:-

This should do the trick:-

默认情况下，a是内联元素，宽度不会影响它们.因此，将其更改为inline-block以使其具有您指定的宽度.

By default a is an inline element and width does not affect them. So change it to inline-block to have it take the width you specify.

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

这篇关于如何使div内的链接填充div内的整个空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！