Geek Answers Handbook

Anchor tag inside ul to li

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

<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <ul> <a href="#"><li>Click one</li></a> <a href="#"><li>Click one</li></a> <a href="#"><li>Click one</li></a> </ul> </body> </html>
+8
html html5
source share
4 answers

Convert to them:

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

Since li must always have a ul parent, this is the cause of your error. But I think you would like your solid li to be clickable, so this CSS style will fix it.

 ul li a { display:block; }

This will display it.

+19
source share

All li will be clickable if you create a li a style, for example:

 ul li a { float: left; margin: 5px; padding: 5px; background: red; }
+1
source share

You should place <li> tags outside of <a> tags not the other way around.

0
source share

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

This CSS should also make the anchor element be the same width and height of the parent li, which will also achieve the desired effect.

 ul li a { width:inherit; height:inherit; }
0
source share

More articles:


All Articles