我知道这已经出现过很多次了,但我在我的具体情况下找不到任何解决方案.
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
<div>
s. <a>
tags to have display: block
<li>
to the <a>
. <li>
s will need to be either floated or display: inline-block
示例:http://jsfiddle.net/8yQ57/
这篇关于让整个<li>作为与正确 HTML 的链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!