在本网站上:http://www.bestcastleintown.co.uk/pg/
我试图通过在<div class="awards_square_home">
内嵌套<a>
标记并添加填充来使每个<div>
的彩色区域成为可点击链接。但是,我已在<div>
上使用填充来定位<a>
。使用此规则中的填充:
.awards_square_home {
border: 10px solid rgb(195, 195, 195);
height: 90px;
margin-bottom: 20px;
padding: 90px 20px 20px;
}
现在当我向元素添加填充时,它没有以我想要的方式扩展填充,这是为了使div的整个彩色区域可以点击。
.awards_square_home a {
padding: 120px 0 20px;
}
我正试图通过<a>
填充<div>
的这个区域:
答案 0 :(得分:0)
以及为什么无法将<div>
添加到<a>
代码中?
a {
display: block;
}
并将您的内容添加到<a>
代码中。
或者从div中删除填充并仅为<a>
标记设置填充。
答案 1 :(得分:0)
如果我没有误解你,你希望你的div都可以点击而不是只用文字。
<a href="#" class="text220 centertext capitalise_text home_feature_turqoise NG">
<div class="awards_square_home turqoise podium">
<span>Best</span>
<span>University</span>
<span>Campaign</span>
</div>
</a>
答案 2 :(得分:0)
我相信我已经通过修改CSS修复了这个问题,如下所示:
.awards_square_home {
border: 10px solid #c3c3c3;
height: 200px;
margin-bottom: 20px;
}
.awards_square_home a {
display:block;
padding: 90px 0px 20px 0px;
}
答案 3 :(得分:0)
不是在父<div>
上设置背景/填充/高度,而是可以将<a>
元素设置为div,并将其设置为:
a {
display: block;
background-image: url("../images/icons/globe_v3.gif");
background-repeat: no-repeat;
background-position: 50% 15%;
padding: 95px 20px 20px 20px;
height: 90px;
}
不要忘记从当前存在的位置删除这些属性。
答案 4 :(得分:-1)
如果你想要a填充div,为什么你在div上使用填充,以及在a上使用margin,唯一的目的是防止a填充div?
删除a上的填充,它应该工作