如何在 jquerymobile 表单中水平放置 2 个列表视图

Question

文档在使用 data-role = "horizo​​ntal" 的按钮上效果很好

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-grouped.html

但它不适用于 Listviews http://jsfiddle.net/sHtfY/

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <div data-role="controlgroup" data-type="horizontal">
            <ul data-inset="true" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Destination" data-inset="true">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Cherry</a></li>
                    <li><a href="#">Cranberry</a></li>
                    <li><a href="#">Grape</a></li>
                    <li><a href="#">Orange</a></li>
                </ul>

            <ul data-inset="true" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Destination" data-inset="true">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Cherry</a></li>
                    <li><a href="#">Cranberry</a></li>
                    <li><a href="#">Grape</a></li>
                    <li><a href="#">Orange</a></li>
                </ul>
        </div>
    </div><!-- /content -->

任何帮助将不胜感激。

Answer 1

对于水平列表视图，使用 jQuery Mobile 提供的ui-grid 布局。

Demo

<div class="ui-grid-a">
 <div class="list ui-block-a">
  <ul data-role="listview">
  </ul>
 </div>
 <div class="list ui-block-a">
  <ul data-role="listview">
  </ul>
 </div>
</div>

CSS - 给 ui-block-a 和 ui-block-b 一个类，以免与使用的其他 ui-grid 冲突。

.list.ui-block-a, .list.ui-block-b { margin-top: 15px !important }