使整个< li>作为链接与正确的HTML [英] Make whole <li> as link with proper HTML
问题描述
我知道这已经上了很多次，但是在我的具体情况下找不到任何解决方案。
我有一个导航栏并且我想让整个< li> 的链接或可点击，如果你愿意。现在只有< a> （以及我花费过的< div> 可点击。
我试过了 li a {display：inner-block;高度：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>任何人都有一个整洁的解决方案吗？
$ b 提前谢谢！
解决方案
- 摆脱
< div> s。
- 设置
< a> 标记以使 display：block / li>
- 将填充从
< li> 移动到< a> 。
-
< li> 需要浮动或 display：inline-block
示例： http： /jsfiddle.net/8yQ57/
I know this has been up a lot of times before, but I couldn't find any solution in my specific case.
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".
I've tried the li a {display: inner-block; height: 100%; width: 100%} method but the results where just horrible.
The source can be found here: 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>
Do anyone have a neat solution to this?
Thank you in advance!
解决方案
- 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
Example: http://jsfiddle.net/8yQ57/
这篇关于使整个< li>作为链接与正确的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
