html - 如何使用 jQuery Mobile 构建一个 2 x 2 的按钮网格？

Question

我正在尝试使用以下代码在 jQuery Mobile 中构建一个 2x2 网格:

<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>