Html 围绕列表项包装链接标记

我想知道当用户单击成员页面上的

项目时，最好的方法是将用户导航到用户配置文件页面

<li>
    <img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
    <div class="name">John Smith</div>
    <div class="skills">PHP, ASP, MySQL, SQL Server, Javascript</div>
</li>

约翰·史密斯
PHP、ASP、MySQL、SQL Server、Javascript

这是每个列表项的一种标记，它的宽度/高度约为

640x50

block width/height。我希望用户在单击

元素的任何部分时转到他们的个人资料页面

我尝试将整个列表项包装在一个link元素（

）中，但这只会产生一个

0x0

大小的link元素。我也不希望使用Javascript

---

谢谢。

在

LI

周围包装

A

是无效的HTML。为什么不将LI的innerHTML的全部内容包装成一个A标记呢

<li>
    <a href="...">
    <img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
    <div class="name">John Smith</div>
    <div class="skills">PHP, ASP, MySQL, SQL Server, Javascript</div>
    </a>
</li>

您可以这样做：

HTML:

---

A元素中不允许使用div，我也尝试过，但它不允许我单击li元素的任何部分，只允许单击图像和跨距。另外，根据另一条评论，这是无效的HTML。我使用了span而不是div，这是有效的。我刚刚添加了一些css，使整个li可以点击

<li>
    <a href="#" title="Link text" class="list-link"> 
      <img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
      <span class="name">John Smith</span>
      <span class="skills">PHP, ASP, MySQL, SQL Server, Javascript</span>
    </a>
</li>

.list-link{
  display:block;
}