使用JQuery Mobile中的按钮填充整个内容区域

Question

我正在使用JQuery Mobile创建一个包含标题，内容和页脚区域的页面。整个内容区域必须分成两部分，每部分50％，每个部分必须是一个按钮，没有任何圆角或间距，根据使用的设备和设备的布局，可以减小或增加尺寸（肖像）或景观）。我尝试了几种方法，例如使用data-role="controlgroup"和data-type="horizontal"，但它似乎没有提供我想要的内容。有人可以告诉我，首先是否可能，如果可以，应该使用哪些元素和属性？提前谢谢！

Answer 1

以下是一个有效的例子：http://jsfiddle.net/Gajotres/TfzPw/

此解决方案需要：

1. jQuery Mobile网格（Omar在评论中提到过）

   <div class="ui-grid-a">
       <div class="ui-block-a"><a data-role="button" id="custom-btn">Button Left</a></div>
       <div class="ui-block-b"><a data-role="button" id="custom-btn">Button Right</a></div>
   </div><!-- /grid-a -->
   

   官方文件：http://jquerymobile.com/demos/1.3.0-rc.1/docs/content/content-grids.html

2. 删除圆角：

   $(document).on('pagebeforeshow', '#index', function(){       
       $('a').buttonMarkup({ corners: false });
   });
   

   官方文件：http://jquerymobile.com/demos/1.3.0-rc.1/docs/buttons/buttons-options.html

3. 删除内容div上的填充：

   #index-content {
       padding: 0 !important;
   }
   

4. 删除按钮边距：

   #custom-btn {
       margin: 0 !important;
   }