CODEWITHSUNDEEP
htmlcss
user3882075
user3882075

Reputation: 1

How to make whole list item clickable

I was wondering how I could make the whole list item clickable and not just the words. In my list I am only able to click on the words. How could I turn the whole list area into a link? I have the list made with a link inside of it but I want you to be able to click anywhere inside the list area to get redirected. Thank you.

And I am new to this website so I am sorry if I am asking this wrong.

Upvotes: 0

Views: 1128

Answers (2)

Lukas Hechenberger
Lukas Hechenberger

Reputation: 179

You could just insert buttons inside the list items and style them borderless and without a background color -> jsFiddle

Upvotes: 0

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

You need to make the anchor tag a block element and let it control the height of the list item

here is a sample:

HTML:

<ul>
    <li>
        <a href="#">click me!</a>
    </li>
</ul>

CSS:

ul {
    width:200px;
    padding:0px;
    margin:0px;
    list-style:none;
}
li {
    width:100%;
    background:green;
    position: relative;
}
li a {
display:block;
    height:50px;
}

jsfiddle: http://jsfiddle.net/24ELw/

Upvotes: 2

Related Questions