html - div 中的 anchor 标记应该包裹 div

Question

我想在 div 中包装一个内部 a-tag

我认为这适用于 display:block。

但是，它不起作用。

这是我的代码(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标签中的字符串
• 包装我可以在任何地方点击打开链接的a-tag

这可能吗？

谢谢。

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>

对于每个可以更改标记的人，请这样做，将 div 放在 a 中(从 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>