块级可点击区域不能正常工作 [英] block level clickable area not working correctly
问题描述
我试图让< aside>
元素可点击。有内部的元素,我不想单独应用链接,我想它是一个可点击的元素。
I'm trying to make a <aside>
element clickable. There are elements inside and I don't want the links to be applied individually, I would like it to be a clickable element.
<aside class="projectindicator">
<a href="#projectAnchor">
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
<h1>PROJECT</h1>
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
</a>
</aside>
/*Project display*/
.projectindicator{
width: 277px;
height: 35px;
position: relative;
top: 530px;
left: 360px;
text-transform: uppercase;
}
.projectindicator img{
float: left;
}
.projectindicator h1{
float: left;
padding: 0 10px 0 10px;
}
.projectindicator a{
display: block;
font-family: book;
font-size: 30px;
float: left;
}
.projectindicator a:link, .projectindicator a:visited{
text-decoration: none;
color: #2b3a42;
}
.projectindicator a:hover{
text-decoration: none;
color: #3f5765;
}
.projectindicator a:active{
text-decoration: none;
color: #2b3a42;
}
问题是我得到的可点击区域下面的元素和可点击区域小于aside元素。这给用户很难单击链接。
The problem is that I'm getting the clickable area below the element and the clickable area is smaller than the aside element. This gives the user a hard time to click the link.
很简单,但我找不到解决方案。
Simple but I cannot find the solution. Could somebody help me?
推荐答案
在 .projectindicator a
float:left
,但这会导致链接缩小到其内容的大小。我会删除它。
In .projectindicator a
, you added float: left
, but this will cause the link to shrink to the size of its contents. I would remove that.
.projectindicator
本身包含一个高度,而链接没有高度。我要么添加高度到链接本身,要么链接 height:100%
。
.projectindicator
itself contains a height, while the link doesn't have a height. I'd either add the height to the link itself, or give the link height: 100%
.
最后但并非最不重要:确保 .projectindicator
本身没有任何填充,没有任何保证金。
Last but not least: make sure .projectindicator
itself doesn't have any padding and the link inside it doesn't have any margin.
这篇关于块级可点击区域不能正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!