在一个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>