如何在div中创建一个链接来填充div中的整个空间?

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?

我有一个具有设置宽度的div，它围绕着一个链接。我想要内部的链接来填充div的整个空间，这样当我点击div中的任何位置时(我已经将其样式设置为看起来像一个按钮)，它就会到达link。这是我尝试过的，但是。link_class不能做我想做的。有什么建议吗?

HTML:

HTML:

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

CSS:

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

6 个解决方案

#1

This should do the trick:-

这应该可以达到目的:-

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.

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

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

Fiddle

#2

Here is the Solution.

这是解决方案。

The HTML:

HTML:

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

The CSS:

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

Hope this helps.

希望这个有帮助。

#3

This worked. The key was to explicitly set the div height and then use line-height on the link.

这工作。关键是显式地设置div高度，然后在链接上使用行高度。

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

#4

Why use outer div in first place? Write all your code for the link and show your link as a button. That will simplify your problem.

为什么首先使用外部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*/}

Check this demo: Fiddle

检查这个演示:小提琴

#5

You need to make the link a block level element.

您需要将链接设置为块级元素。

.link_class {
    display: block;
}

#6

I know this is an old question, but HTML5 has a better way to do this.

我知道这是一个老问题，但是HTML5有更好的解决方法。

The answer today is:

今天的答案是:

HTML:

HTML:

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

CSS stays the same, except you don't need .link_class anymore.

CSS保持不变，除了不再需要.link_class。