CSS 如何使 div 内的链接填充 div 内的整个空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16555644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a link inside a div fill the entire space inside the div?
提问by Nancy Collier
I have a divthat has a set width and it is wrapped around a link. I want the link inside to fill the entire space of the divso 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_classdoesn't do what I want. Any suggestions?
我有一个div有固定宽度的，它包裹在一个链接上。我希望里面的链接填满整个空间，div这样当我点击里面的任何地方div（我已经设计成看起来像一个按钮）时，它会转到链接。这是我尝试过的，但.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%;
}
回答by PSL
回答by Nitesh
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.
希望这可以帮助。
回答by Nancy Collier
This worked. The key was to explicitly set the divheight and then use line-heighton the link.
这奏效了。关键是明确设置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;
}
回答by Abhijeetchindhe
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
检查这个演示：小提琴
回答by ScottM
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。
回答by Brandon Durham
You need to make the link a block level element.
您需要使链接成为块级元素。
.link_class {
display: block;
}
