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

【问题标题】：How to build a 2 x 2 grid of buttons using jQuery Mobile?如何使用 jQuery Mobile 构建一个 2 x 2 的按钮网格？
【发布时间】：2012-02-09 01:53:45
【问题描述】：

我正在尝试使用以下代码在 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%，我会得到初始行为，即每行一个按钮。

谁有解决方案？谢谢。

【问题讨论】：

我找到了一个解决方案：使用 CSS 将 A 元素的边距设置为 0px 并且它们渲染得很好！

标签： html css jquery-mobile

【解决方案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>

【讨论】：

我还注意到，您可以使用 CSS 将 A 元素的边距设置为 0px，并且它们渲染得很好。

【解决方案2】：

理想情况下，应该为块创建单独的 div 元素，并将按钮包含在这些 div 元素中

【讨论】：