19

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

我有一个导航栏，<li>如果你愿意的话，我希望整个 's 都被“链接”或“可点击”。现在只有<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>

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

先感谢您！

4

9 回答 9

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

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

于 2012-12-06T14:18:03.927 回答
7

只需使用“显示块”进行链接。

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/ :)

于 2012-12-06T14:23:33.497 回答
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 是块行元素

于 2012-12-06T14:20:18.847 回答
1

我想你可能的意思是inline-block，不是inner-block：

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

此外，inline-block较旧的 IE 浏览器也有其自身的一系列问题，并且可能不会像您期望的那样做出反应。

于 2012-12-06T14:18:43.170 回答
0

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

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

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

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

选择一个...祝你好运

于 2012-12-06T14:14:36.877 回答
0

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

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

于 2012-12-06T14:16:14.100 回答
0

您应该制作a元素display:block或display:inline-block.

于 2012-12-06T14:19:52.463 回答
0

这就是我所做的：

a { display: block; }

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

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

于 2012-12-06T14:21:50.990 回答
-3

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

于 2012-12-06T14:13:16.800 回答