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>

http://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a — adt, Jun 05 '13 at 12:49

score 3 · Answer 1 · answered Jun 05 '13 at 12:47

3

It's not good coding. try this:

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

answered Jun 05 '13 at 12:47

Gimmy

3,781
2
18
27

score 2 · Accepted Answer · answered Jun 05 '13 at 12:49

2

Add display:block to a tag

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

DEMO

answered Jun 05 '13 at 12:49

Sowmya

26,684
21
96
136

score 2 · Answer 3 · answered Jun 05 '13 at 12:55

2

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

answered Jun 05 '13 at 12:55

Ganesh Bora

1,133
9
17

score 1 · Answer 4 · answered Jun 05 '13 at 12:50

1

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

answered Jun 05 '13 at 12:50

heinkasner

425
5
18

Make the entire list area clickable

4 Answers4