Jquery Mobile:水平按钮,填充容器

时间:2015-06-09 12:09:32

标签: javascript jquery jquery-ui jquery-mobile mobile

在移动应用程序上工作时,我正在尝试创建两个按钮,这些按钮应该增长并填充其容器。

因此,在纵向视图中,两个按钮应该用尽其父级的整个宽度,而在横向视图中,它们也应该增长以填满整个父级。

我尝试过使用网格,从我遇到的帖子中提出的建议,但这似乎没有完成这项工作......

按钮不会增长并填充其父级。

<div class="ui-grid-a">
 <div class="ui-block-a">
  <a href="tel:xxxx" class="ui-btn ui-icon-phone ui-btn-icon-left ui-btn-inline">xxxx</a>
 </div>
 <div class="ui-block-b">
  <a href="test" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-btn-inline">More</a>
 </div>
</div>

P.S。没有网格布局的单个按钮增长,以正确填充其父容器。

<a href="tel:xxxx" class="ui-btn ui-icon-phone ui-btn-icon-left">xxxx</a>

似乎ui-btn-inline导致它不会增长。

1 个答案:

答案 0 :(得分:2)

只需删除ui-btn-inline课程即可。

如果您不要希望按钮填充容器,那么该类就是如此。随着该课程的消失,网格解决方案将起作用。

  

<强> DEMO