Arrangement of "list items" in listview using html - html

Question

This is my first "phonegap" application project, so done with the listview in html based on the requirement but listview is not properly formatted (ie one below the other), how to make the items to display one below the other. please help me.
here's my code for listview
<div>
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="images/c3.jpeg" align="left">
<h3>CONGRATULATIONS</h3>
</a>
</li>
<li><a href="#">
<img src="images/c2.jpeg" align="left">
<h3>HOLYDAY</h3>
</a>
</li>
<li><a href="#">
<img src="images/card1.jpeg" align="left">
<h3> I'M SORRY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c4.jpg" align="left">
<h3> HAPPY BIRTHDAY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c5.jpg" align="left">
<h3> MISSING U</h3>
</a>
</li>
<li><a href="#">
<img src="images/images.jpg" align="left">
<h3> ENGAGEMENT</h3>
</a>
</li>
![device output][1]

Answer 1

First of all you cannot use <br /> as direct ul child and secondly am sure you are using float: left; for the images which are inside li tag and thus it is spoiling the layout. Inorder to fix it, use the CSS property block below
ul.class_name li {
overflow: hidden;
/* Other styles goes here */
}
Just assign a class to ul element, replace the .class_name in CSS with the class you assigned to the ul element in your HTML.
Also, you can use the below declaration to self clear the parent element like
.clear:after {
display: table;
content: "";
clear: both;
}
This will self clear the parent element just like overflow: hidden; does, but in a better way.