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

Question

Я пытаюсь построить сетку 2x2 в 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% слева) Если я заставлю ширину A быть 50%, я получу начальное поведение, то есть одну кнопку на строку.

У кого-нибудь есть решение? Спасибо.

Answer 1

Вам нужно обернуть их в 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>

Answer 2

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