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>

Answer 2

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

中

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

2 个答案: