我正在尝试使用以下代码在 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%,我会得到初始行为,即每行一个按钮。
谁有解决办法?谢谢。
最佳答案
您需要将它们包装在 ui-block-?
div 中,示例:
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>
关于html - 如何使用 jQuery Mobile 构建一个 2 x 2 的按钮网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9197578/