How do I make the whole area of a list item in my navigation bar, clickable as a link?

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 th

Answer 1

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

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

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 4

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

Answer 5

Use following:

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

Answer 6

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