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-tag中呢？

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

在列表项周围包装链接标记

2 个答案: