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

Question

I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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!)

Answer 5

Use following:

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

Answer 6

Or you could use jQuery:

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

Answer 7

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;

Answer 8

Just simply apply the below css :

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

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

Answer 9

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

Answer 10

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

Answer 11

You can always wrap the whole tag li in with the hiperlink tag Here is my solution:

 #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; text-align: center; float: left; width: 40px; 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> <a href="#"><li>One1</li></a> <a href="#"><li>Two</li></a> <a href="#"><li>Three</li></a> <a href="#"><li>Four</li></a> </ul> </div> <div> <h2>Heading</h2> </div> 

Answer 12

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

For example with your code:

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