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

这将使整个方块可以点击。 DEMO

Answer 2

使用HTML5，您可以将块放在a标记中：

<a href="Prosjektplan.pdf">
    <p class="downloadBoks">
        Prosjektbeskrivelse
    </p>
</a>

Answer 3

你需要让div内部的<a>具有100％的高度和宽度。这样他们就占据了div的所有内部，因此div是“可点击的”：

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

划分<a> tag</a>

3 个答案: