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

【问题标题】：How can I make the whole area of an unorderd list clickable?如何使无序列表的整个区域可点击？
【发布时间】：2013-10-24 16:01:09
【问题描述】：

我想让我的无序列表的整个区域都可以点击单个 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>

非常感谢您提供任何帮助或建议。

【问题讨论】：

可点击是什么意思？我在您的代码中没有看到链接 (<a>)，那么单击会做什么？
@Sébastien 对于单个 URL，已写入。

标签： css list clickable unordered

【解决方案1】：

这是一回事。

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

【讨论】：

【解决方案2】：

如上所述，您可以将锚标记包裹在所有内容上。这只是来自 HTML5 的有效代码，因此如果您使用的是 HTML4，它将无法验证。

但这样做的可访问性很差。理想情况下，您应该有一个链接并使用 Jquery 将其 href 绑定到容器元素。

【讨论】：