如何使用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

理想的情况应该创建块单独的div元素，并有按钮封闭在那些div元素内

Answer 2

你需要用他们在一个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>