问题描述
我知道这已经出现过很多次了,但我在我的具体情况下找不到任何解决方案.
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/