在一個div錨標記應包在div

Question

我想在div

我覺得這個作品有display:block包裹內a-tag。

但是，它不起作用。

這裏是我的代碼（https://jsfiddle.net/x6hw0e3u/）：

HTML：

<div class="column dmd-card-box"> 
    <div class="media image-top medium"> 
    <div class="media-body text-center"> 
     <div class="excerpt"> 
     <p><span class="fa fa-user-plus fa-4x"></span></p> 
     <p><strong>Treffsicher Neukunden gewinnen</strong></p> 
     <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>  </div> 
    <a href="" class="button ">Neukunden gewinnen</a> 
    </div> 
    </div> 
</div> 

CSS：

.dmd-card-box{ 
    height:300px; 
    border:1px solid black; 
    width:25%; 
} 
.button{ 
    display:block; 
} 

我想達到的是：

• 隱藏的字符串在a-tag
• 包裝的a標籤，我可以點擊無處不在打開鏈接

這可能嗎？

謝謝。

Answer 1

更新

正如你不能改變的標記，做到這樣的，使用position: absolute

.dmd-card-box { 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    width: 25%; 
 
} 
 
.media-body { 
 
    position: relative; 
 
} 
 
.button { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div class="column dmd-card-box"> 
 
    <div class="media image-top medium"> 
 
    <div class="media-body text-center"> 
 
     <div class="excerpt"> 
 
     <p><span class="fa fa-user-plus fa-4x"></span> 
 
     </p> 
 
     <p><strong>Treffsicher Neukunden gewinnen</strong> 
 
     </p> 
 
     <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p> 
 
     </div> 
 
     <a href="" class="button "> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

大家誰可以改變的標記，做到這樣的，你把內adiv（截至HTML5這是現在有效）

.dmd-card-box { 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    width: 25%; 
 
} 
 

 
.button { 
 
}

<div class="column dmd-card-box"> 
 
    <div class="media image-top medium"> 
 
    <div class="media-body text-center"> 
 
     <a href="" class="button "> 
 
     <div class="excerpt"> 
 
      <p><span class="fa fa-user-plus fa-4x"></span></p> 
 
      <p><strong>Treffsicher Neukunden gewinnen</strong></p> 
 
      <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

最簡單和建議的方式來實現你想要的是包裹在div的a標籤內：

<a href="" class="button "> 
<div class="column dmd-card-box"> 
    <div class="media image-top medium"> 
    <div class="media-body text-center"> 
     <div class="excerpt"> 
     <p><span class="fa fa-user-plus fa-4x"></span></p> 
     <p><strong>Treffsicher Neukunden gewinnen</strong></p> 
     <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>  </div> 
    </div> 
    </div> 
</div> 
</a> 

如果在這樣做的任何約束，那麼你應該設置a標籤與絕對位置和100％的寬度和高度：

.dmd-card-box 
{ 
position: relative; 
} 
.dmd-card-box a 
{ 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 100%; 
} 

你WOU ld還需要刪除此方法的a標記中的文本。下面是使用絕對定位的鏈接後更新的jsfiddle： https://jsfiddle.net/x6hw0e3u/1/

.dmd-card-box{ 
 
    height:300px; 
 
    border:1px solid black; 
 
    width:25%; 
 
    position: relative; 
 
} 
 
.button{ 
 
    display:block; 
 
    left: 0; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
}

<div class="column dmd-card-box"> 
 
    <div class="media image-top medium"> 
 
    <div class="media-body text-center"> 
 
     <div class="excerpt"> 
 
     <p><span class="fa fa-user-plus fa-4x"></span></p> 
 
     <p><strong>Treffsicher Neukunden gewinnen</strong></p> 
 
     <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>  </div> 
 
    <a href="" class="button "></a> 
 
    </div> 
 
    </div> 
 
</div>