使整个 div 区域可点击的超链接答案

【问题标题】：Make entire div area clickable hyperlink使整个 div 区域可点击的超链接
【发布时间】：2016-07-19 08:19:24
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

提问前请先搜索。

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

How to make an entire div clickable with CSS

How to make a whole 'div' clickable in html and css without javascript?

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

只需将 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>

【讨论】：