logo标签列表

使整个<li>成为具有适当HTML的链接

htmlcssnavigationhtml-lists
21

我知道这个问题以前已经被讨论过很多次，但我在我的特定情况下找不到任何解决方案。

我有一个导航栏，我希望整个<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，这样可以吗？ - Muthu Kumaran
9个回答
53
  • 摆脱 <div>。
  • 将 <a> 标签设置为 display: block。
  • 将内边距从 <li> 移动到 <a> 中。
  • <li> 元素需要浮动或设置为 display: inline-block。

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

1
太好了！这正是我想要实现的！非常感谢你，Steve！ - Christian Lundahl
帮我节省了几个小时的时间，因为我一直在尝试为Sharepoint网站上的整个幻灯片添加链接。结果只需要添加height:100%就行了。 - matt
9
只需使用“display block”来设置链接。
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/，涉及到IT技术。
这并不能解决整个问题。如果对li应用了填充（实际上是这样的），那么在a周围仍然会有不可点击的空间（它将占据所有水平空间直到填充）。 - Ryan Kinal
1
当然，填充应该在链接内 :) 在我的jsfiddle示例中，它在链接内部。我认为这很明显。 - starikovs
4
我自己也遇到了这个问题。
答案再简单不过了：
<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是块级行元素。
如果您在回答中包含代码示例并使用原始CSS，则会得到+1分。 - Ryan Kinal
1
我认为你可能是想用 inline-block 而不是 inner-block：
li a {display: inline-block; height: 100%; width: 100%; }

此外，inline-block 在旧版 IE 浏览器中存在一些问题，并且可能不会按照您的预期进行响应。
是的，我做了。最近可能睡眠不足了。 :-) - Christian Lundahl
0
0
0
你应该将 a 元素设置为 display:block 或 display:inline-block。
1
因为“看起来可点击”和“实际上可点击”是两回事，而且这会导致更糟糕的用户体验。 - Ryan Kinal
-1
先生，您使用jQuery吗？ 如果是的话，您可以尝试这个：

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

或者你也可以将它用作 CSS：

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

请选择一个... 祝你好运

2
这个问题的解决方案并不是很好。jQuery 太过复杂（尤其是在没有提到 JavaScript 的情况下）。而 position: absolute 会导致 li 失去高度和宽度。 - Ryan Kinal
-3
将 <a> 标签移动到包裹 <li> 标签的位置。根据 this 的回答，锚点标签必须包含内联元素，而你的 <li> 标签是内联的，所以这应该是有效的。
很遗憾，除了<ul>以外的任何东西都不能包含<li>。不允许使用 ul a li {}。 - Sean
1
元素的内联或块级特性在HTML规范中定义，并不会被CSS的display属性改变。display:inline只是让某些东西看起来像是内联的，它并不能真正地使其成为内联元素。 - Steve Pugh
1
实际上，<ul> 只能包含 <li> 元素，除此之外不能包含其他任何元素。 - Ryan Kinal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接