Css 块级可单击区域工作不正常

我正在试着做一个

/*项目显示*/
.投射指示器{
宽度：277px；
高度：35px；
位置：相对位置；
顶部：530px；
左：360px；
文本转换：大写；
}
.投影指示器img{
浮动：左；
}
.投射指示器h1{
浮动：左；
填充：0 10px 0 10px；
}
.投射指示器a{
显示：块；
字体系列：书籍；
字体大小：30px；
浮动：左；
}
.projectindicator a:链接，.projectindicator a:已访问{
文字装饰：无；
颜色：#2b3a42；
}
.投射指示器a：悬停{
文字装饰：无；
颜色：#3f5765；
}
.投影指示器a：激活{
文字装饰：无；
颜色：#2b3a42；
}

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

---

很简单，但我找不到解决办法。有人能帮我吗？

在

.projectindicator a

中，您添加了

float:left

，但这将导致链接缩小到其内容的大小。我会删除它

.projectindicator

本身包含高度，而链接没有高度。我要么将高度添加到链接本身，要么将链接的高度设置为100%

---

最后但并非最不重要的一点：确保

.projectindicator本身没有任何填充，并且其中的链接没有任何边距。
如果我添加高度：100%，则不会发生任何更改。我认为如果应用float:left，它将继承.projecindicator的高度和宽度。这将覆盖所有表面。我没有任何边距或填充应用。下一步我能试试什么？
<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;
}