如何使导航栏中的列表项的整个区域作为链接可单击？

我用一个无序列表做了一个水平导航栏，每个列表项都有很多填充物，使它看起来很漂亮，但是作为链接的唯一区域是文本本身。如何使用户能够单击列表项中的任何位置以激活链接？

#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="/images/renderedicon.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>

94821 次浏览
小开
最佳答案

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

小开

Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.

小开

Define your anchor tag css property as: 

{display:block}

Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.

小开

Put the list item within the hyperlink instead of the other way round.

For example with your code:

<a href="#"><li>One</li></a>
小开

Or you could use jQuery:

$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
小开

Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.

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;
}

(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)

小开

Use following:

a {
display: list-item;
list-style-type: none;
}
小开

You should use this CSS property and value into your li:

pointer-events:all;

So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property: 

pointer-events:none;
小开

Just simply apply the below css :

<style>
#nav ul li {
display: inline;
}


#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
小开

here is how I did it

Make the <a> inline-block and remove the padding from your <li>

Then you can play with the width and the height of the <a> in the <li>

Put the width to 100% as a start and see how it works

PS:- Get the help of Chrome Developer Tools when changing the height and width

小开

If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:

a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}

提交答案