让整个<li>作为与正确 HTML 的链接

2022-01-10 00:00:00 html-lists navigation html css

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

I know this has been up a lot of times before, but I couldn't find any solution in my specific case.

我有一个导航栏，如果你愿意的话，我希望整个 <li> 都被链接"或可点击".现在只有 <a> (以及我摆弄过的 <div> )是可点击的".

I've got a navigation bar and I want the whole <li>'s to be "linked" or "clickable" if you will. Now only the <a> (and the <div>'s I've fiddled with) is "clickable".

我试过 li a {display: inner-block;高度:100%；width: 100%} 方法，但结果很糟糕.

I've tried the li a {display: inner-block; height: 100%; width: 100%} method but the results where just horrible.

来源可以在这里找到:http://jsfiddle.net/prplxr/BrcZK/

<!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>

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

Do anyone have a neat solution to this?

提前谢谢你！

推荐答案

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

    • Get rid of the <div>s.
    • Set the <a> tags to have display: block
    • Move the padding from the <li> to the <a>.
    • The <li>s will need to be either floated or display: inline-block

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

相关文章