Question

该文档在使用data-role =“horizontal”

的按钮上运行良好

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 }

如何以jquerymobile形式水平放置2个列表视图

1 个答案: