填充<a> element inside a <div> to achieve a clickable box</div></a>

时间:2013-04-18 09:06:46

标签: css

在本网站上: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>的这个区域:

enter image description here

5 个答案:

答案 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>

Fiddle here

答案 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上的填充,它应该工作