使用html在列表視圖中的「列表項目」的安排

這是我的第一個「phonegap」應用程序項目，所以在html中根據需求使用listview完成，但listview格式不正確（即一個在另一個之下），如何使項目顯示在另一個之下。請幫幫我。使用html在列表視圖中的「列表項目」的安排

，這裏是我的列表視圖代碼

<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]

enter image description here

來源

2013-08-31 DD.

我覺得這裏沒有問題，你也不能使用'br'作爲'ul'直接孩子 –

感謝您的回覆，我編輯了我的問題並添加了設備輸出屏幕截圖@ Mr.Alien –

和您的CSS ??? –

首先，你不能使用<br />直接ul孩子，其次是確保您正在使用float: left;爲圖像裏面的li標籤，因此它破壞了佈局。序來解決它，使用CSS屬性塊下面

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

只是一個類分配給ul元，更換.class_name與您分配給ul元素在你的HTML類CSS。

此外，您還可以使用下面的聲明自清父元素像

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

這會自行清除的父元素就像overflow: hidden;做，但在一個更好的辦法。

來源

2013-08-31 07:49:09

我刪除了
和標籤現在圖像和文本出現在另一個下面，但希望圖像和文本出現在同一行。 @Alien先生 –

@DD。只要保持它的方式，並簡單地在你的CSS中使用上面的答案，看看它做了什麼，沒有關於phonegap的很多信息，但是當你不清除你的浮動元素時會發生這種情況，所以使用上面的規則集溢出隱藏，看看它是什麼，正確地閱讀我的答案，至少在這裏* ... n與您分配給您的HTML中的ul元素的類的CSS * –

好的非常感謝您的答案:)我會按照它。先生@先生 –

使用html在列表視圖中的「列表項目」的安排

回答

相關問題