使整个div区域成为可点击的超链接

Question

如何使整个红色区域“可点击”？如果可能的话，我不想使用Javascript。

https://jsfiddle.net/8m6z0h22/

.block {
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
}

<div class="block"> 
      <h3>Book a season ticket with Manchester United</h3>
      <ul> 
      <li><a href="#" title="Read more about Manchester United">Read more about Manchester United <span class="bold">></span></a></li> 
      </ul>
    </div>

- michaelmcgurk

Answer 1

请将你的所有代码都包裹在<a>标签中，而不是<div>标签中。

.block {
    text-decoration: none;
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
    display: block;
}
.block h3 {
  color: black;
}
.block ul li {
  text-decoration: underline;
}

<a href="#" title="Read more about Manchester United" class="block"> 
  <h3>Book a season ticket with Manchester United</h3>
  <ul> 
    <li>Read more about Manchester United <span class="bold">></span></li> 
  </ul>
</a>

- Mohammad Usman

Answer 2

在提问之前，请先搜索。

这些链接可能会对您有所帮助

如何使用CSS使整个div可点击

如何在HTML和CSS中使整个'div'可点击，而无需JavaScript？

- ngrj

Answer 3

你可以在 a 中添加整个 div。

.block {
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
}
a{

    text-decoration:none;
}

<a href="#" title="Read more about Manchester United"><div class="block"> 
      <h3>Book a season ticket with Manchester United</h3>
      <ul> 
      <li>Read more about Manchester United <span class="bold"></span></li> 
      </ul>
    </div>
 </a>

- Sagar Kodte

Answer 4

只需将div放在锚点标签内即可：

只需将div放在锚点标签内即可：

<a href="#" title="Read more about Manchester United"><div class="block"> 
  <h3>Book a season ticket with Manchester United</h3>
  <ul> 
    <li>Read more about Manchester United <span class="bold">></span></li> 
  </ul>
 </div>
</a>

- DanielTheGeek