锚标签不能与引导程序的图形标签一起使用答案

【问题标题】：Anchor tag not working with figure tag of bootstrap锚标签不能与引导程序的图形标签一起使用
【发布时间】：2016-12-07 21:41:54
【问题描述】：

我想在用户单击图时将其重定向到链接，但锚标记在单击图像时不起作用。但是带有“CLICK HERE”的锚标签有效。

<a href="http://google.com">
<figure class="effect-ming">

<img src="http://example.com/dd.img" alt="Placeholder" />

    <figcaption>
        <p><?php the_title(); ?></p>
        <a href="<?php the_permalink(); ?>">CLICK HERE</a>
    </figcaption> 
</figure>
</a>

css：

figure.effect-ming figcaption::before {
  border: 0px solid #fff !important;  
  bottom: 30px;  
  box-shadow: 0 0 0 0px rgba(0, 0, 0, 0) !important;  
  content: "";  
  left: 30px;  
  opacity: 0;  
  position: absolute;  
  right: 30px;  
  top: 30px;  
  transform: scale3d(1.4, 1.4, 1);  
  transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;  
}

【问题讨论】：

每个锚标签需要关闭才能打开一个新标签； HTML 101
@Fred-ii- 我确实关闭了它，只是它没有在堆栈上正确缩进所以没有显示，无论如何我更新了问题

标签： php css wordpress twitter-bootstrap

【解决方案1】：

你需要关闭你的锚标签：

<a href="http://google.com">
    <img src="http://example.com/dd.img" alt="Placeholder" />
</a>

<figure class="effect-ming">
    <figcaption>
        <p><?php the_title(); ?></p>
        <a href="<?php the_permalink(); ?>">CLICK HERE</a>
    </figcaption> 
</figure>

我认为这样会更好。我移动了figure 标签，因为嵌套不正确。如果你想要图中的图像，你可以这样做：

<figure class="effect-ming">


    <a href="http://google.com">
        <img src="http://example.com/dd.img" alt="Placeholder" />
    </a>

    <figcaption>
        <p><?php the_title(); ?></p>
        <a href="<?php the_permalink(); ?>">CLICK HERE</a>
    </figcaption> 
</figure>

【讨论】：

问题仍然存在。我认为 figcaption 位于 img 之上，因此无法单击锚标记。