如何使无序列表的整个区域可点击？

我想使我的无序列表的整个区域可点击一个URL。到目前为止没有运气。如何使无序列表的整个区域可点击？

的CSS标记至今如下：

#artListContainer { 
margin: 0 0 0 0; 
} 

#artListContainer ul { 
list-style-type: none; 
width: 590px; 
margin: 20px 0 0 0; 
} 

#artListContainer h3 { 
font: bold 18px/1.5 Helvetica, Verdana, sans-serif; 
color:#333333; 
} 

#artListContainer li img { 
float: left; 
margin: 0 15px 0 0; 
} 

#artListContainer li p { 
font: 200 12px/1.5 Helvetica, Verdana, sans-serif; 
} 

#artListContainer li { 
padding: 10px; 
overflow: auto; 
} 

#artListContainer li:hover { 
background: #eee; 
cursor: pointer; 
}

我的HTML标记目前看起来是这样的：

<div id="artListContainer"> 
<ul> 
    <li> 
    <img src="themes/default/templates/articles/articlethumbs/8.png"> 
    <h3>Title goes here</h3> 
    <p>description goes here.</p> 
    <span style="font-weight:bold">Views:&nbsp;</span>(327) 
    &nbsp;&nbsp;&nbsp; 
    <span style="font-weight:bold">Comments:&nbsp;</span>(4) 
    &nbsp;&nbsp;&nbsp; 
    <span style="font-weight:bold">Likes:&nbsp;</span>(4) 
    </li> 
</ul> 
</div>

提前许多感谢任何帮助或建议。

来源

2013-10-24 Ruf1

你点击的意思是什么？我的代码中没有看到链接（''），那么点击会做什么？ –

@Sébastien对于单个URL，它被写入。 – EdenSource

这是一件事。

<a href="#"> 
<ul> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li>Stuff</li> 
</ul> 
</a>

来源

2013-10-24 16:05:19 usernolongerregistered

谢谢。这可以跨所有浏览器使用吗？ – Ruf1

@ Ruf1我刚刚在FF，Chrome和IE中试过。到现在为止还挺好。 – usernolongerregistered

如上所述，您可以在任何地方包裹锚标签。这只是HTML5中的有效代码，所以如果您使用的是HTML4，它将无法验证。

虽然这样做的可访问性很差。理想情况下，你应该有一个单一的链接，并用jquery将它的href绑定到容器元素。

来源

2013-10-24 16:08:06 arroni

如何使无序列表的整个区域可点击？

回答

相关问题