使用html安排listview中的“列表项”

Question

这是我的第一个“phonegap”应用程序项目，所以使用html中的listview根据需求完成，但listview没有正确格式化（即一个在另一个之下），如何使项目显示在另一个之下。请帮帮我。

这是我的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

首先，您不能将<br />用作直接ul子项，其次请确保您使用float: left;作为li标记内的图片，因此它是破坏布局。为了解决这个问题，请使用下面的CSS属性块

ul.class_name li {
   overflow: hidden;
   /* Other styles goes here */
}

只需将一个班级分配给ul元素，将CSS中的.class_name替换为您分配给HTML中ul元素的班级。

此外，您可以使用以下声明自行清除父元素，如

.clear:after {
   display: table;
   content: "";
   clear: both;
}

这将自我清除父元素，就像overflow: hidden;那样，但是以更好的方式。