block level clickable area not working correctly

问题

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

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?

回答1:

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 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%.

Last but not least: make sure .projectindicator itself doesn't have any padding and the link inside it doesn't have any margin.

来源：https://stackoverflow.com/questions/17533224/block-level-clickable-area-not-working-correctly