使整个 <li> 成为正确 HTML 的链接
Posted
技术标签:
【中文标题】使整个 <li> 成为正确 HTML 的链接【英文标题】：Make whole <li> as link with proper 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，可以吗？
【参考方案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>的。以上是关于使整个 <li> 成为正确 HTML 的链接的主要内容，如果未能解决你的问题，请参考以下文章