完全可链接的 li 元素答案

【问题标题】：Completely linkable li element完全可链接的 li 元素
【发布时间】：2012-09-11 20:42:51
【问题描述】：

我需要使整个<li> 或<tr> 元素可链接，有人建议我使用javascript，并带有onclick 操作。

    function doNav(url)
    {
        document.location.href = url;
    }

这个做的工作，问题是，这种方式对用户来说是不可能的，了解 url 的去向。如何在不改变浏览器行为的情况下实现我的需求（完全可点击的元素）？

【问题讨论】：

为什么不直接使用<a> 标签？
stackoverflow.com/questions/3264370/…

标签： javascript html css webbrowser-control

【解决方案1】：

您不需要 javascript。添加这个css

ul li a {
  display: block;
  padding: 10px 20px;//more or less, to suit your needs
  text-decoration: none;
}

这将使包含锚点的整个<li> 可点击

【讨论】：

那你不应该使用 inline-block 吗？
噢！高科技的危险:)
@Spatie，你想保留哪些内联元素？

【解决方案2】：

<li class="block"><a href="whatever">Text</a></li>

这可以让你看到目标。然后：

.block{
    display:block;
    text-decoration:none; //just so it isn't underlined
}

在 CSS 中会处理“整个东西都需要可点击”的问题。

【讨论】：

@Mariano 哦，对了，整个<li> 必须是可点击的。忘记那部分了。我编辑了。

【解决方案3】：

HTML

<ul class="menu">
 <li class="anchors" title="click me I am a link" > link 1 </li>
 <li class="anchors" title="click me I am a link" > link 1 </li>
 <li class="anchors" title="click me I am a link" > link 1 </li>
 <li class="anchors" title="click me I am a link" > link 1 </li>
</ul>

CSS：

ul li.anchors{
 text-decoration:underline;
 color:blue;
 list-style-type:none;
 display: inline-block;
 margin:2px 4px;
 padding: 2px 4px;
}

ul li.anchors:hover{
 color:navy;
 cursor:pointer;
}

更好的方法可能是这样的：http://jsfiddle.net/iamanubhavsaini/Cv2FM/1/

在这里，使用content 属性和data- 属性预先告诉用户他们将要点击什么。

【讨论】：

jsfiddle.net/iamanubhavsaini/Cv2FM 和 jsfiddle.net/iamanubhavsaini/Cv2FM/1