使用正确的HTML将整个<li>作为链接

Question

使用正确的HTML将整个<li>作为链接

Chr*_*ahl 16 html css navigation html-lists

我知道这已经很多次了,但在我的具体情况下我找不到任何解决方案.

我有一个导航栏,<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>

Run Code Online (Sandbox Code Playgroud)

有人有一个很好的解决方案吗？

先感谢您!

Answer 1

Ste*_*ugh 46

摆脱<div>s.
设置<a>标签display: block
将填充从移动<li>到<a>.
该<li>旨意无需被浮动或display: inline-block

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

Answer 2

sta*_*ovs 6

只需使用"显示块"即可获得链接.

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! */
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，9 月前
查看次数：	51393 次
最近记录：	10 年，2 月前