如何使整个列表项可点击

Question

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.

Answer 1

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/

Answer 2

您可以只buttons inside the list items插入buttons inside the list items其设置为无边界且没有背景色的样式-> jsFiddle