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

我知道这个问题以前出现过很多次，但我找不到针对我的具体情况的任何解决方案。

我有一个导航栏，我想要整个 <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>

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

提前致谢!

最佳答案