1

これは私の最初の「phonegap」アプリケーション プロジェクトなので、要件に基づいて html でリストビューを作成しましたが、リストビューが適切にフォーマットされていません (つまり、上下に 1 つ)、項目を上下に表示する方法です。私を助けてください。

これがリストビューの私のコードです

<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確信しています。それを修正するには、以下の CSS プロパティ ブロックを使用します。float: left;li

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

クラスを要素に割り当てるだけで、CSS をHTML の要素に割り当てたクラスulに置き換えます。.class_nameul

また、以下の宣言を使用して、次のように親要素を自己クリアすることもできます

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

これは親要素を同様に自己クリアしますoverflow: hidden;が、より良い方法です。

于 2013-08-31T07:49:09.580 に答える