Make the entire list area clickable

Question

On my site I have a few links within lists. I was wondering if it is possible to make it so I can click on the entire list area, rather than just where the inner link sits. An example is my "post" link at the top right of the page.

This is the code I'm working with: http://jsfiddle.net/spadez/XgSBf/1/

I tried to put the link outside the list like this but it didn't work:

<a href=#><li>test</li></a>

• gitaarik: did you forget the <ul> tag?
• adt: stackoverflow.com/questions/3074454/…

Answer 1

It's not good coding. try this:

<li><a href="#" style="display: block">test</a></li>

Answer 2

Add display:block to a tag

a {
 text-decoration: none; display:block
}

DEMO

Answer 3

Add style="display:block" to anchor tag. adding display block make this area of link click able

Answer 4

<li><a style="display:block;" href="some_page.extension">Next</a></li>

Rather try something like above. Include the link within your 'list item' tag, this way you make the entire area clickable.