Jquery mobile - 具有多列的列表视图答案

【问题标题】：Jquery mobile - List view with multiple columnsJquery mobile - 具有多列的列表视图
【发布时间】：2012-06-16 04:16:11
【问题描述】：

我必须在列表视图中显示 3 列。我试着在<li><table></table></li> 里面放一张桌子，但它看起来不太好。有没有办法在列表视图中显示 3 列？

我为 3 列尝试了 ui-grid-b。但是 CSS 问题...jsfiddle.net/9ZBAS/1 我试过了，如果我使用href，我可以看到列重叠，如果不使用href但没有href，我无法获得下一个图标按钮。

有什么帮助吗？

【问题讨论】：

标签： php jquery-mobile

【解决方案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/

【讨论】：

我们可以为这个 li 使用固定布局以及自动换行选项，因为内容要么被截断，要么块正在与其他块合并。 ?
jsfiddle.net/9ZBAS/1 我试过了，如果我使用 href，我可以看到列重叠，如果不使用 href 但没有 href，我无法获得下一个图标按钮。

【解决方案2】：

使用表格替代网格布局。这在 jQM 中没有很好的记录

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

HTML：

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

查看：