56

我有一个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%;
}
4

8 回答 8

83

这应该可以解决问题：-

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

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

小提琴

于 2013-05-15T02:11:21.410 回答
7

这是解决方案。

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

希望这可以帮助。

于 2013-05-15T05:40:20.793 回答
4

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

今天的答案是：

HTML：

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

CSS 保持不变，只是您不再需要 .link_class。

于 2018-04-16T20:03:37.290 回答
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;
}
于 2013-05-15T03:22:59.830 回答
2

您需要使链接成为块级元素。

.link_class {
    display: block;
}
于 2013-05-15T02:11:35.130 回答
2

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

检查这个演示：小提琴

于 2013-05-15T05:21:11.710 回答
1 
.button_class {
    display:flex;
}

.link_class {
  flex-grow: 1;
  text-align: center;   
}
于 2021-10-04T13:16:52.353 回答
-1

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

于 2020-08-24T15:38:00.423 回答