jQuery手機列表查看 - 在右側添加一些文字

我剛開始使用jquery mobile，請耐心等待。我試圖創建一個列表視圖，其右側的項目價格對齊（項目的描述與左側對齊 - 此部分工作正常）。jQuery手機列表查看 - 在右側添加一些文字

我搜索了互聯網，找不到任何可能幫助我的東西。

這裏是我的代碼：

<div id="home" data-role="page"> 
    <div data-role="header"> 
      <h1>For sale</h1> 
    </div> 

    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-filter="false"> 
      <li><a href="#itemA">A</a></li> <!-- want to put a right-aligned price in here!--> 
      <li><a href="#itemB">B</a></li> 
      <li><a href="#itemC">C</a></li> 
      <li><a href="#itemD">D</a></li> 
      <li><a href="#itemE">E</a></li> 
     </ul> 
    </div> 
</div>

來源

2012-10-31 Eamorr

你可能會尋找類似數量的氣泡，這顯示在文檔的this page。您可以用價格替換計數。

的documentation狀態：

爲了在計數指標添加到列表項的右側，有一類ui-li-count

來源

2012-10-31 00:24:19

我希望避免計數氣泡。文字有點小...還有，泡數字做小數嗎？ – Eamorr

我很確定你可以把任何你想要的。你也可以使用'ui-li-aside'，但我不確定那會是什麼樣子。如果你不喜歡這個文本有多小，可以將另一個類添加到你要封裝價格的div/span中，並用css將字體大小增加到任何你想要的值。 –

包裹中的一個元素的數量，您可以覆蓋CSS作爲描述here

重要的主題

這些主題是作爲一個堅實的起點，但意味着要定製。由於所有內容都由CSS控制，因此使用 Web檢查器工具可以輕鬆識別要修改的樣式屬性。

你的情況

添加此

<style> 
.ui-page .ui-content .ui-listview .ui-li { 
    text-align: right; 
} 
</style>

，你會得到這樣的結果
enter image description here

編輯：我剛纔重讀你的問題，你喜歡左邊的說明只有右側的價格，也許你應該遵循傑夫那麼的意見...

來源

2012-10-31 01:21:19 Taifun

感謝您的建議 – Eamorr

另一個想法：你可以添加一個2柱網，看到這裏http://jquerymobile.com/test/docs/content/content-grids.html

兩柱網

要建立一個兩列（50/50％）佈局，開始用的容器類UI-網格一個的，並添加在它裏面的兩個子容器歸類與UI - 嵌段 - 一個用於第一列和UI-嵌段b的第二：
<div class="ui-grid-a"> 
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div> 
網格類可應用於到任何貨櫃

來源

2012-10-31 20:22:49 Taifun

我發現了documentation的解決方案。

您可以使用這樣的事情你li元素中：

<p class="ui-li-aside ui-li-desc"><strong>2.75</strong></p>

來源

2013-11-19 15:39:17

jQuery手機列表查看 - 在右側添加一些文字

回答

相關問題