使整个 <li> 成为正确 HTML 的链接答案

【问题标题】：Make whole <li> as link with proper HTML使整个 <li> 成为正确 HTML 的链接
【发布时间】：2012-11-24 14:01:18
【问题描述】：

我知道这已经出现过很多次了，但在我的具体情况下我找不到任何解决方案。

我有一个导航栏，如果你愿意的话，我希望整个<li> 都被“链接”或“可点击”。现在只有<a>（和我摆弄过的<div>）是“可点击的”。

我已经尝试过li a {display: inner-block; height: 100%; width: 100%} 方法，但结果太糟糕了。

来源可以在这里找到：http://jsfiddle.net/prplxr/BrcZK/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <div id="innermenu">    
                    <ul id="menulist">       
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

有人对此有一个巧妙的解决方案吗？

提前谢谢你！

【问题讨论】：

如果你想让<li> 具有可点击性，那么你需要使用Javascript，可以吗？

标签： html css navigation html-lists

【解决方案1】：

摆脱<div>s。
将<a> 标签设置为display: block
将填充从<li> 移动到<a>。
<li>s 需要浮动或display: inline-block

示例：http://jsfiddle.net/8yQ57/

【讨论】：

完美！这正是我想要达到的目标！非常感谢你，史蒂夫！
节省了我尝试获取链接以应用于 Sharepoint 网站上的整个幻灯片的时间。只需添加高度：100%。

【解决方案2】：

只需使用“显示块”作为链接。

ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

这是http://jsfiddle.net/TWFwA/ 的示例：)

【讨论】：

这并不能解决整个问题。如果对li（它是）应用了填充，那么a 周围仍然会有不可点击的空间（这将占用直到填充的所有水平空间。跨度>
当然，填充应该在链接内部:) 它在我的 jsfiddle 示例中的内部链接。我认为这很明显。

【解决方案3】：

我自己也遇到了这个问题。

答案再简单不过了：

<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

换句话说，您想将 LI 所具有的 css 应用到 A 元素。确保A是块线元素

【讨论】：

+1 用于在您的答案中包含代码示例，并使用 OP 提供的实际 CSS。

【解决方案4】：

我想你可能指的是inline-block，而不是inner-block：

li a {display: inline-block; height: 100%; width: 100%; }

另外，inline-block 在旧版 IE 浏览器中也存在一系列问题，可能不会像您预期的那样做出反应。

【讨论】：

是的，我做到了。我现在可能睡得太少了。 :-)

【解决方案5】：

先生，您使用 jquery 吗？如果是的话，你可以试试：

$("li").click(function(){
   $(this).find('a').click();
});

或者您也可以将其用作 css：

li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

选择一个... 祝你好运

【讨论】：

不是非常好的解决这个问题。 jQuery 太过分了（尤其是在没有提到 JavaScript 的情况下）。而position: absolute 将导致li 失去高度和宽度。

【解决方案6】：

只需使用您的样式直接格式化a 而不是li。

我已经改变了你的小提琴http://jsfiddle.net/BrcZK/1/

【讨论】：

【解决方案7】：

这是我的工作：

a { display: block; }

然后按照我认为合适的方式设置锚的样式。

这是小提琴：http://jsfiddle.net/erik_lopez/v4P5h/

【讨论】：

【解决方案8】：

您应该将a 元素设为display:block 或display:inline-block。

【讨论】：

因为出现可点击与实际上可点击不同。而且用户体验更差。

【解决方案9】：

移动<a> 标记，以便它们包裹<li> 标记。根据this的回答，锚标签必须包含内联元素，看起来你的<li>是内联的，所以这应该是有效的。

【讨论】：

很遗憾，<li> 位于除<ul> 之外的任何位置下都是无效的。不允许ul a li {}。
元素的内联或块性质在 HTML 规范中定义，不会被 CSS 显示属性更改。 display: inline 只是让某些东西看起来是内联的，实际上并没有使其内联。
其实<ul>不能包含任何东西，除了<li>的。