我遇到了在6个不同的div周围包装锚标签的问题,并且不确定为什么它们以不明显的方式表现。我重新创建了问题here。
问题是锚点没有清除div并在尝试设置锚标记样式时导致一些问题。
a {
text-decoration: none;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 25px solid transparent;
}
.categorypost {
height: 200px;
margin-bottom: 80px;
width: 320px;
display: inline-block;
color: #FFF;
font-family: "ff-tisa-web-pro", serif;
font-size: 20px;
}
a.catpostlink {
text-decoration: underline;
font-size: 20px;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
a.catpostlink:hover {
color: #005e48;
text-decoration: underline;
font-size: 20px;
}
<div class="catwrapper">
<div class="categorylist">
<a href="businesses.php" title="SME Businesses for sale">
<div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg'); background-size: 100%;">
<div style="float: left; background-color: #498d7b; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
<p style="line-height: 0px;">Businesses</p>
</div>
<div id="triangle-topright" style="float:right; border-top: 25px solid #498d7b;"></div>
</div>
</a>
<a href="carehomes.php" title="Care homes for sale">
<div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg'); background-size: 100%;">
<div style="float: left; background-color: #618ab8; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
Care homes
</div>
<div id="triangle-topright" style="float:right; border-top: 25px solid #618ab8;"></div>
</div>
</a>
<a href="kennelscatteries.php" title="Kennels & Catteries for sale">
<div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">
<div style="float: left; background-color: #fed670; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
Kennels & catteries
</div>
<div id="triangle-topright" style="float:right; border-top: 25px solid #fed670;"></div>
</div>
</a>
<a href="daynurseries.php" title="Day nurseries for sale">
<div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">
<div style="float: left; background-color: #fed670; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
Day nurseries
</div>
<div id="triangle-topright" style="float:right; border-top: 25px solid #fed670;"></div>
</div>
</a>
<a href="postoffice.php" title="Post Offices for sale">
<div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">
<div style="float: left; background-color: #aa232a; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
Post offices & shops
</div>
<div id="triangle-topright" style="float:right; border-top: 25px solid #aa232a;"></div>
</div>
</a>
<a href="catering.php" title="Catering Businesses for sale">
<div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">
<div style="float: left; background-color: #0e2c67; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
Catering businesses
</div>
<div id="triangle-topright" style="float:right; border-top: 25px solid #0e2c67;"></div>
</div>
</a>
</div>
</div>