html - Laravel Blade - 我在标签内的 div 在浏览器上呈现不可预测

Question

Heei，我在使用 blade laravel 查看我的 html 结果时遇到了问题。看看这张照片

代码

HTML

<section class="list_events">
  @foreach($acara as $value)
    <div class="col s12 m6">
      <a class="test" style="display: inline-block">
        <figure class="card">
          <img src="some_photo_from_db" alt="" />
          <figcaption>
            <p>{{ $value->tanggal_event }}</p>
            <p>{{ $value->nama_event }}</p>
            <div>
              <a href="#">{{ $value->lokasi_event }}</a>
              <a href="#">{{ $value->kategori_event }}</a>
            </div>
          </figcaption>
        </figure>
      </a>
    </div>
  @endforeach
</section>

CSS

   * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style-type: none;
      text-decoration: none;
    }
    a {
      color: inherit;
    }
    /*and some other css which is not appropriate with this case*/

body {
  font-size: 16px;
  overflow-x: hidden;
}
main {
  padding: 20px 0;
}

.container {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

结果

请看。为什么 a 标签没有包裹 figure？ a 标签看起来像在 figure 中的每个元素上重复？

Answer 1

根据这些(1，2)答案。嵌套 <a href>是不好的做法。您可以通过将嵌套的 href 包装在 <object> 中来强制使其工作。标签