css - 带有 <a> 标签的 Div

Question

首先，我知道有很多类似的问题，但我读过的文章都没有帮助我。不知何故，这行不通..

我想在 class="downloadBoks" 内创建区域可点击，而不仅仅是 <a></a> 中的文本.不使用 JavaScript。

HTML:

<div class="sideboks">
    <div class="downloadBoks">
        <a href="Prosjektplan.pdf">Prosjektbeskrivelse</a>
    </div>
    <div class="downloadBoks">
        <a href="Statusrapport.pdf">Statusrapport</a>
    </div>
</div>

CSS:

.downloadBoks {
    height: 23px;
    width: 150px;
    font-size: 14px;
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 2px 0px;
    margin-top: 0px;
    margin-bottom:0px;
    line-height: 25px;
    vertical-align:middle;
    box-shadow: inset 0px 0 2px 2px #777777;
}


div.sideboks{
    width: 150px;
    height: 50px;
    margin-top: 150px;
    margin-left: 54px;
    position: fixed;
    background-color: #B7AFA3;
    border:solid;
    border-width: 5px 0px 5px 5px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: inset 1px 0 0px 0px #777777;
}

这是我目前的代码。现在，“downloadBoks”纯粹是外观。

编辑:所以我意识到将 div 放在另一个 div 中可能与此有关？因此也更新了该代码。感谢到目前为止的所有回复!

Answer 1

.downloadBoks a {
     display: block;
     height: 100%;
 }

这将使整个方 block 可点击。 DEMO