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>

有人对此有一个简洁的解决方案吗？

提前谢谢！

Answer 1

摆脱<div>。
将<a>代码设置为display: block
将填充从<li>移至<a>。
<li> s需要浮动或display: inline-block

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

Answer 2

只需使用“显示块”即可获得链接。

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/：）

Answer 3

我自己刚遇到这个问题。

答案不能简单：

<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是块行元素

Answer 4

我认为您的意思可能是inline-block，而不是inner-block：

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

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

Answer 5

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

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

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

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

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

Answer 6

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

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

Answer 7

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

Answer 8

这就是我的所作所为：

a { display: block; }

然后按照我认为合适的方式设置锚点的样式。

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

Answer 9

移动<a>标记，以便它们包装<li>标记。根据{{3}}回答，锚标记必须包含内联元素，看起来您的<li>是内联的，所以这应该是有效的。

使整个<li>与正确的HTML </li>建立链接

HTML

9 个答案: