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

时间:2016-07-19 08:19:24

标签: html css

如何制作整个红色区域' clickable'?如果我能提供帮助,我宁愿不使用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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:8)

将所有代码包含在<a>代码中,而不是<div>

&#13;
&#13;
.block {
    text-decoration: none;
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
    display: block;
}
.block h3 {
  color: black;
}
.block ul li {
  text-decoration: underline;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

答案 2 :(得分:0)

您可以在a

中添加整个div

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

    text-decoration:none;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

只需将div放在锚标记内:

extends Activity