如何使我的导航栏中的列表项的整个区域,可点击作为链接?

我有一个由无序列表组成的水平导航栏,每个列表项都有很多填充以使其看起来不错,但是作为链接工作的唯一区域就是文本本身。 如何让用户点击列表项中的任意位置来激活链接?

#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>