anchor tag inside ul before li

Question

I am adding an anchor tag inside ul and inside anchor tag I am adding li. But when I tested this on html validator it gives me error. Is there a proper way to achieve this?<

Answer 1

You should be putting <li> tags outside the <a> tags not the other way round.

Answer 2

The whole li will be clickable if you style up the li a, like this:

ul li a {
    float: left;
    margin: 5px;
    padding: 5px;
    background: red;
}

Answer 3

Convert it to these:

<ul>
    <li><a href="#">Click one</a></li>
    <li><a href="#">Click one</a></li>
    <li><a href="#">Click one</a></li>
</ul>

Because li should always have a parent of ul, that is the cause of your error. But I think you wanted your whole li to be clickable so this CSS style will fix it.

ul li a { display:block; }

That will display it.

Answer 4

This question is very old but I want to add something to it:

This CSS should also force the anchor element be the same width and height of the parent li which would achieve the desired effect as well.

ul li a {
    width:inherit;
    height:inherit;
}