Div與<a>標籤

首先，我知道有很多類似的問題，但我沒有讀過的文章幫助過我。不知何故，這是行不通的。Div與<a>標籤

我想讓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可能有什麼關係呢？所以更新了該代碼。感謝迄今爲止的所有迴應！

來源

2013-10-25 Patidati

純粹的樣子？那是什麼意思？ –

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

這將使整個廣場點擊。 DEMO

來源

2013-10-25 21:19:50

我建議將高度和寬度設置爲100％。 –

'a'元素繼承父級的高度和寬度。看演示。 –

仍然無法正常工作，downloadBoks位於另一個div內，這有什麼好說的嗎？ – Patidati

有了HTML5，你可以把塊a標籤：

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

來源

2013-10-25 21:20:11 bfontaine

你需要讓div的內部的<a>有100％的高度和寬度。這樣他們把所有的div的內部，因此該div是「可點擊」：

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

來源

2013-10-25 21:20:17 scrappedcola

回答

相關問題