Make whole lt;ligt; as link with proper HTML(让整个lt;ligt;作为与正确 HTML 的链接)
问题描述
我知道这已经出现过很多次了,但我在我的具体情况下找不到任何解决方案.
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 的链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:让整个<li>作为与正确 HTML 的链接
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
