Question

我想在a-tag

中包含内部div

我认为这适用于display:block。

然而，它不起作用。

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-tag包裹起来以打开链接

这可能吗？

谢谢。

Answer 1

更新

由于您无法更改标记，请使用position: absolute

执行此操作

＆＃13;

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

＆＃13;

<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>

＆＃13;

对于每个可以更改标记的人，请执行以下操作，将div放在a内（从HTML5开始，这现在有效）

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

您还需要删除此方法的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>

div中的锚标记应该包装div

2 个答案: