html页面中的HTML标签位置对齐问题

Question

I got into this weirdest problem. I have an unordered list with two list items as

<ul>
<li><a href="#"><p>1</p></a>
</li>
<li><a href="#"><p>2</p></a>
</li>
</ul>

(end tag of 1st list item and start tag of 2nd are in different lines) This html code works fine. But when I change the above code to

<ul>
<li><a href="#"><p>1</p></a>
</li><li>
<a href="#"><p>2</p></a>
</li>
</ul>

(end tag of 1st list item and start tag of 2nd are in same line and also there is no space in between them), the alignment breaks. You can see the problem here

http://jsfiddle.net/Venugopal/AawU2/2/

Answer 1

At last found some workaround

click here