使整个< 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屋!