How to make the entire area of ​​a list item in my navigation bar accessible by link?

Question

I have a horizontal navigation bar made from an unordered list, and there are many indents in each element of the list to make it look beautiful, but the only area that acts as a link is the text itself. How can I let the user click anywhere in the list item to activate 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

Do not put padding in the "li" element. Instead, attach the anchor tag to display:inline-block; and apply a gasket to it.

Answer 2

Define the css property for the tag binding as:

 {display:block} 

Then the anchor will occupy the entire area of ​​the list, so your click will work in an empty place next to your list.

Answer 3

Make the anchor tag contain an addition, not li . Thus, it will occupy the entire area.

Answer 4

Use the following:

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

Answer 5

Super, super late for this party, but anyway: you can also anchor the anchor to the flex element. This is especially useful for dynamic size / ordered list items.

 a { /* This flexbox code stretches the link clickable * area to fit its parent block. */ display: flex; flex-grow: 1; flex-shrink: 1; justify-content: center; } 

(Caveat: flexboxes obvs is still not supported. Autoprefixer for rescue!)

Answer 6

Or you can use jQuery:

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

Answer 7

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

 pointer-events:all; 

So, you can process the link using jQuery or JavaScript or use the a tag, but all the other elements of the tag inside li must have the CSS property:

 pointer-events:none; 

Answer 8

Just apply the following CSS:

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

Answer 9

You can always wrap the entire li tag with a 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 10

Place the list item inside the hyperlink, not the other way around.

For example, with the code:

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