html - 将链接标签包裹在列表项周围

Question

我想知道当他单击<li>成员页面上的项目时，将用户导航到用户个人资料页面的最佳方法是什么。

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

这就是每个列表项的标记类型，它以大约640x50块的宽度/高度出现。<li>我希望用户在单击元素的任何部分时转到他们的个人资料页面。

我尝试将整个列表项包装在一个链接元素 ( <a>) 中，但这只会产生一个0x0大小合适的链接元素。我也不想使用 Javascript。

谢谢。

Answer 1

你可以这样做：

HTML：

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

CSS：

.list-link{
  display:block;
}

Answer 2

环绕A是LI无效的 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>