如何使我的导航栏中的列表项的整个区域，可点击作为链接？
我有一个由无序列表组成的水平导航栏，每个列表项都有很多填充以使其看起来不错，但是作为链接工作的唯一区域就是文本本身。 如何让用户点击列表项中的任意位置来激活链接？
#nav { background-color: #181818; margin: 0px; overflow: hidden; } #nav img { float: left; padding: 5px 10px; margin-top: auto; margin-bottom: auto; vertical-align: bottom; } #nav ul { list-style-type: none; margin: 0px; background-color: #181818; float: left; } #nav li { display: block; float: left; padding: 25px 10px; } #nav li:hover { background-color: #785442; } #nav a { color: white; font-family: Helvetica, Arial, sans-serif; text-decoration: none; } <div id="nav"> <img src="http://img.dovov.comrenderedicon.png" alt="Icon" height="57" width="57" /> <ul> <li><a href="#">One1</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <div> <h2>Heading</h2> </div>
不要把填充在“李”项目。 相反，设置锚点标签display:inline-block; 并应用填充。
定义你的锚标签CSS属性为：
{display:block}
然后锚点将占据整个列表区域，因此您的点击将在列表旁边的空白处运行。
使锚标记包含填充而不是li 。 这样，它将占用所有的区域。
或者你可以使用jQuery：
$("li").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
超级，超级晚，但无论如何：你也可以风格的锚作为一个弹性项目。 这对dynamic大小/排列的列表项目特别有用。
a { /* This flexbox code stretches the link's clickable * area to fit its parent block. */ display: flex; flex-grow: 1; flex-shrink: 1; justify-content: center; }
（注意：flexboxes仍然没有得到很好的支持。Autoprefixer救援！）
你应该使用这个CSS属性和值到你的li ：
pointer-events:all;
因此，您可以使用jQuery或JavaScript处理链接，或者使用标签，但li所有其他标签元素都应具有CSS属性：
pointer-events:none;
使用以下：
a { display: list-item; list-style-type: none; }
将列表项放在超链接中，而不是相反。
例如你的代码：
<a href="#"><li>One</li></a>
