使用适当的 HTML 将整个 <li> 作为链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13745347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make whole <li> as link with proper HTML
提问by Christian Lundahl
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".
我有一个导航栏，<li>如果您愿意，我希望整个's 都可以“链接”或“可点击”。现在只有<a>（和<div>我摆弄过的）是“可点击的”。
I've tried the li a {display: inner-block; height: 100%; width: 100%}method but the results where just horrible.
我试过这个li a {display: inner-block; height: 100%; width: 100%}方法，但结果太可怕了。
The source can be found here: http://jsfiddle.net/prplxr/BrcZK/
来源可以在这里找到：http: //jsfiddle.net/prplxr/BrcZK/
HTML
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!
先感谢您！
回答by Steve Pugh
- 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
- 摆脱
<div>s。 - 设置
<a>标签display: block - 将填充从 移动
<li>到<a>。 - 该
<li>旨意无需被浮动或display: inline-block
Example: http://jsfiddle.net/8yQ57/
回答by starikovs
Just use "display block" for link.
只需使用“显示块”作为链接。
ul {
display: block;
list-style-type: none;
}
li {
display: inline-block; /* or block with float left */
/* margin HERE! */
}
li a {
display: block;
/* padding and border HERE! */
}
Here's the example http://jsfiddle.net/TWFwA/:)
回答by Jamie Hutber
I myself just had this problem.
我自己就遇到了这个问题。
The answer couldn't be simpler:
答案再简单不过了：
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
list-style-type: none;
display: inline;
margin-left: 5px;
margin-right: 5px;
font-family: Georgia;
font-size: 11px;
background-color: #c0dbf1;
border: 1px solid black;
padding: 10px 20px 10px 20px;
}
Correct
.menuitem a {
list-style-type: none;
display: block;
margin-left: 5px;
margin-right: 5px;
font-family: Georgia;
font-size: 11px;
background-color: #c0dbf1;
border: 1px solid black;
padding: 10px 20px 10px 20px;
}
in other words, you want to apply the css that the LI's had to the A element. Making sure that the A is a block line element
换句话说，您想将 LI 所拥有的 css 应用于 A 元素。确保 A 是块线元素
回答by Sean
I think you may have meant inline-block, not inner-block:
我想你的意思可能是inline-block，不是inner-block：
li a {display: inline-block; height: 100%; width: 100%; }
Also, inline-blockhas its own set of problem with older IE browsers, and probably won't react how you'd expect.
此外，inline-block较旧的 IE 浏览器也有其自身的一系列问题，并且可能不会像您期望的那样做出反应。
回答by Mitchell
You should make the aelements display:blockor display:inline-block.
您应该制作a元素display:block或display:inline-block.
回答by Erik
Here's what I do:
这是我所做的：
a { display: block; }
Then style the anchors as I see fit.
然后按照我认为合适的方式设计锚点。
Here's the fiddle: http://jsfiddle.net/erik_lopez/v4P5h/
回答by Michael Antonius
a sir you use jquery ? if yes, you can try it :
先生，您使用 jquery 吗？如果是，你可以试试：
$("li").click(function(){
$(this).find('a').click();
});
or you could use it too as css:
或者你也可以将它用作 css：
li{
position:relative;
}
li a {
position:absolute;top:0px;left:0px;width:100%;height:100%;
}
Choose one ... Good luck
选择一个......祝你好运
回答by Jona
Just format the adirectly instead of the liwith your styles.
只需a直接格式化而不是li使用您的样式。
I have alterd your fiddle http://jsfiddle.net/BrcZK/1/
我已经改变了你的小提琴http://jsfiddle.net/BrcZK/1/
