Как построить сетку 2 x 2 с помощью jQuery Mobile?

Question

Я пытаюсь построить 2х2 сетки в JQuery Mobile, используя следующий код:

<div class="ui-grid-a"> 
<a class="ui-block-a" data-role="button" data-icon="arrow-r" data-iconpos="right" href="#france">France</a> 
<a class="ui-block-b" data-role="button" data-icon="arrow-r" data-iconpos="right" href="#india">India</a> 
<a class="ui-block-a" data-role="button" data-icon="arrow-r" data-iconpos="right" href="#uk">UK</a> 
<a class="ui-block-b" data-role="button" data-icon="arrow-r" data-iconpos="right" href="#usa">USA</a> 
</div> 

Я ожидаю получить Франции и Индии на одной строке и Великобритании и США, на втором ряду. На практике я получаю четыре кнопки на четырех разных строках, то есть один поверх друг друга.

Я немного поработал с CSS и выяснил, что если я изменю ширину элементов A, скажем, на 49%, я получаю две кнопки на строку, за исключением того, что кнопки не центрированы на экране (т. Е. они занимают всего 2 x 49% = 98% экрана, а 2% - справа). Если я заставляю ширину А составлять 50%, я получаю начальное поведение, то есть одну кнопку в строке.

У кого-нибудь есть решение? Благодарю.

Answer 1

В идеале нужно создать отдельные Див элементы для блоков и имеют кнопки заключенные внутри этих элементов div

Answer 2

Вам нужно обернуть их в ui-block-? DIV, пример:

• http://jsfiddle.net/CZLcR/31/

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
      <a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#france">France</a> 
      </div> 
      <div class="ui-block-b"> 
      <a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#india">India</a> 
      </div> 
      <div class="ui-block-a"> 
      <a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#uk">UK</a> 
      </div> 
      <div class="ui-block-b"> 
      <a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#usa">USA</a> 
      </div> 
     </div> 
    </div> 
</div>