jquery mobile - 多列列表視圖

Question

我必須在列表視圖中顯示3列。 我試過<li><table></table></li>裏面的桌子，但它看起來不太好看。 有沒有什麼辦法在列表視圖中顯示3列？

我試過ui-grid-b 3列。但CSS問題... jsfiddle.net/9ZBAS/1 我試過，我可以看到列重疊，如果我使用href和工作發現如果不使用href但沒有href我不能得到下一個圖標按鈕。

任何幫助？

Answer 1

試試這個

<li > 
    <div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div> 


</li> 

檢查此鏈接;; http://jquerymobile.com/test/docs/content/content-grids.html

---

編輯

---

檢查這一項 http://jsfiddle.net/9ZBAS/47/

---

Answer 2

替代網格布，使用表。

<table summary="This table lists all the JetBlue flights."> 
    <caption> 
     Travel Itinerary 
    </caption> 
    <thead> 
     <tr> 
      <th scope="col">Flight:</th> 
      <th scope="col">From:</th> 
      <th scope="col">To:</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <td colspan="5">Total: 3 flights</td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <th scope="row">JetBlue 983</th> 
      <td>Boston (BOS)</td> 
      <td>New York (JFK)</td> 
     </tr> 
     <tr> 
      <th scope="row">JetBlue 354</th> 
      <td>San Francisco (SFO)</td> 
      <td>Los Angeles (LAX)</td> 
     </tr> 
     <tr> 
      <th scope="row">JetBlue 465</th> 
      <td>New York (JFK)</td> 
      <td>Portland (PDX)</td> 
     </tr> 
    </tbody> 
</table> 

CSS：

<style type="text/css"> 
    table { width:100%; } 
    table caption { text-align:left; } 
    table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; } 
    table th, td { text-align:left; padding:6px;} 
</style> 

查看：

這是沒有很好地JQM

• http://jquerymobile.com/demos/1.1.0/docs/content/content-html.html

HTML文件

相關：

• JQuery Mobile Table