问题描述
我知道这已经出现过很多次了，但我在我的具体情况下找不到任何解决方案.
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 havedisplay: block - Move the padding from the
<li>to the<a>. - The
<li>s will need to be either floated ordisplay: inline-block
示例:http://jsfiddle.net/8yQ57/
这篇关于让整个<li>作为与正确 HTML 的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！