I have a heading with a link inside, I want to make the h2 a different background to the link. However, when I add padding to the link, it overflows the parents, how can I make the parent be the height of the child?
我有一个带有链接的标题,我想让h2成为链接的不同背景。但是,当我向链接添加填充时,它会溢出父级,如何使父级成为子级的高度?
<h2><a href="#">Something</a></h2>
h2 {background:blue; }
h2 a {background:red; padding:20px; color:white;}
JSfiddle: http://jsfiddle.net/5LHmr/
Thanks
3 个解决方案
#1
7
Set display: inline-block within the h2 a { ... } ruleset: Demo
在h2 a {...}规则集:Demo中设置display:inline-block
#2
2
Use display:inline-block
h2 a {
background:red;
padding:20px;
color:white;
display:inline-block;
}
#3
-1
h2 {background:blue; padding:20px;}
h2 a {background:red; padding:20px; color:white;}
#1
7
Set display: inline-block within the h2 a { ... } ruleset: Demo
在h2 a {...}规则集:Demo中设置display:inline-block
#2
2
Use display:inline-block
h2 a {
background:red;
padding:20px;
color:white;
display:inline-block;
}
#3
-1
h2 {background:blue; padding:20px;}
h2 a {background:red; padding:20px; color:white;}