我知道这之前已经过了很多次，但我找不到我的特定情况下，任何解决方案。
我有一个导航栏，我想整个<li>的被‘挂’或‘点击’如果你愿意。 现在只有<a> （和<div>的我已经摆弄）是‘点击’。
我已经试过li a {display: inner-block; height: 100%; width: 100%} li a {display: inner-block; height: 100%; width: 100%} 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>
不要任何人有一个很好地解决了这个？
先感谢您！
- 摆脱
<div>秒。 - 设置
<a>代码，以display: block - 从移动填充
<li>到<a> 。 - 的
<li>旨意需要被任一浮动或display: inline-block
例如： http://jsfiddle.net/8yQ57/
只要使用“显示块”的链接。
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/ :)
我自己只是有这个问题。
答案再简单不过了：
<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的只好A元素的CSS。 在确认A是一个块行元件
我想你可能意味着inline-block ，不inner-block ：
li a {display: inline-block; height: 100%; width: 100%; }
此外， inline-block都有自己的一套的问题与旧的IE浏览器，而且很可能会没有反应过来你如何期望。
您使用jquery一个先生？ 如果是的话，你可以尝试：
$("li").click(function(){
$(this).find('a').click();
});
或者你可以使用它作为太CSS：
li{
position:relative;
}
li a {
position:absolute;top:0px;left:0px;width:100%;height:100%;
}
选择一个...祝你好运
只需格式化a ，而不是直接的li与你的风格。
我已经alterd你的提琴http://jsfiddle.net/BrcZK/1/
这是我做的：
a { display: block; }
然后样式锚，因为我认为合适的。
这里的小提琴： http://jsfiddle.net/erik_lopez/v4P5h/
你应该把a元素display:block或display:inline-block 。
移动<a>代码，使它们包住<li>标记。 根据这个答案，锚标签必须包含内联元素，它看起来像你的<li>的是内联，所以这应该是有效的。
