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

Fiddle

Answer 2

这是Solution。

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

希望这有帮助。

Answer 3

这很有用。关键是明确设置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 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*/}

查看此演示：Fiddle

Answer 5

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

.link_class {
    display: block;
}

Answer 6

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

今天的答案是：

HTML：

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

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

Answer 7

您可以在元素中使用引导程序class="stretched-link"，它将扩展到div。

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

7 个答案:

Fiddle