1

这是我的第一个“phonegap”应用程序项目，因此根据要求使用 html 中的 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]

在此处输入图像描述

4

1 回答 1

0

首先，您不能将<br /> 其用作直接ul子项，其次要确保您使用float: left;的是标签内的图像，li因此会破坏布局。为了修复它，请使用下面的 CSS 属性块

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

只需为ul元素分配一个类，将.class_nameCSS 中的类替换为ul您为 HTML 中的元素分配的类。

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

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

这将像这样overflow: hidden;做一样自行清除父元素，但以更好的方式。

于 2013-08-31T07:49:09.580 回答