我知道这已经出现过很多次了,但我在我的具体情况下找不到任何解决方案.
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 的链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!
如何检查重复的 CSS 规则?How to check for duplicate CSS rules?(如何检查重复的 CSS 规则?)
删除多个文件中的重复 CSS 声明Remove duplicate CSS declarations across multiple files(删除多个文件中的重复 CSS 声明)
如何复制 div onclick 事件?How can I duplicate a div onclick event?(如何复制 div onclick 事件?)
从谷歌驱动器打开 htmlopening html from google drive(从谷歌驱动器打开 html)
如何将视频从 Google 驱动器嵌入到网页?How to embed videos from Google drive to webpage?(如何将视频从 Google 驱动器嵌入到网页?)
如何在 iframe 中查看 Google Drive pdf 链接How to view Google drive pdf link in iframe(如何在 iframe 中查看 Google Drive pdf 链接)