css - 块级可点击区域无法正常工作

我正在尝试使<aside>元素可点击。里面有元素，我不想单独应用链接，我希望它是可单击的元素。

<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;
}

问题是我得到了元素下面的可点击区域，并且可点击区域小于旁边的元素。这使用户很难单击链接。

很简单，但是我找不到解决方案。有人可以帮我吗？

最佳答案

在.projectindicator a中，您添加了float: left，但这将导致链接缩小到其内容的大小。我会删除它。

.projectindicator本身包含一个高度，而链接没有高度。我要么将高度添加到链接本身，要么给链接height: 100%。

最后但并非最不重要的一点：确保.projectindicator本身没有任何填充，并且其中的链接没有任何边距。

关于css - 块级可点击区域无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17533224/