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 的链接
基础教程推荐
- 检查 HTML5 拖放文件类型 2022-01-01
- Bokeh Div文本对齐 2022-01-01
- npm start 错误与 create-react-app 2022-01-01
- 原生拖动事件后如何获取 mouseup 事件? 2022-01-01
- 在 contenteditable 中精确拖放 2022-01-01
- 如何添加到目前为止的天数? 2022-01-01
- fetch 是否支持原生多文件上传? 2022-01-01
- 即使用户允许,Gmail 也会隐藏外部电子邮件图片 2022-01-01
- Bootstrap 模态出现在背景下 2022-01-01
- Fabric JS绘制具有活动形状的多边形 2022-01-01
