Как разместить 2 ListViews горизонтально в jquerymobile форме

Question

документация отлично работает на кнопках с использованием данных-роли = "горизонтальный"

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

Для горизонтального просмотра списка используйте ui-grid макет, предлагаемый jQuery Mobile.

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 }